reactjs - 在 ES6 中使用历史混合？

Question

我有以下代码，如何重构 mixin？我听说你可以使用 this.context 来解决某些问题，但不确定如何在这种情况下应用它。我不明白为什么 ES6 想要取消 mixins...一些向后兼容性会很好。

import React from 'react';
import {Router, History} from 'react-router';

var SearchGithub = React.createClass({
    mixins: [ History ], //not sure what to do with this
    handleSubmit: function() {
        var username = this.refs.username.value;
        this.refs.username.value = '';
        this.history.pushState(null, '/profile/'+username);
    },
    render: function() {
        return (
            <div className="col-sm-12">
                <form onSubmit={this.handleSubmit}>
                    <div className="form-group col-sm-7">
                        <input type="text" className="form-control" ref="username" />
                    </div>
                    <div className="form-group col-sm-5">
                        <button type="submit" className="btn btn-block btn-primary">Search Github</button>
                    </div>
                </form>
            </div>
        )
    }
});

Answer 1

React 路由器在 History docs 中有一个专门的部分文件解释了如何在类中使用历史记录。

如果你看看 history mixin is implemented ，然后你会发现它只是一个从上下文中获取历史变量的包装器。

在您的类(class)中，您可以自己完成此操作。

import PropTypes from 'react-router';

var SearchGithub = React.createClass({
  handleSubmit() {
    // ...
    this.context.history.pushState(null, '/profile/' + username);
  }
});

SearchGithub.contextTypes = { history: PropTypes.history };

或者，您可以查看 react-mixin ，它提供了一个将 mixin 与 ES6 类一起使用的接口(interface)。

import { History } from 'react-router';
import reactMixin from 'react-mixin';

var SearchGithub = React.createClass({
  // ...
});

reactMixin(SearchGitHub.prototype, History);

React 的类接口(interface)是 designed without mixins 有一些充分的理由。 .