Reactjs 在ES6中使用历史混合?

Reactjs 在ES6中使用历史混合?,reactjs,ecmascript-6,Reactjs,Ecmascript 6,我有以下代码,如何重构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

我有以下代码,如何重构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>
        )
    }
});
从“React”导入React;
从“react Router”导入{Router,History};
var SearchGithub=React.createClass({
mixins:[历史记录],//不确定该怎么办
handleSubmit:function(){
var username=this.refs.username.value;
this.refs.username.value='';
this.history.pushState(null,“/profile/”+用户名);
},
render:function(){
返回(
搜索Github
)
}
});

React router在文件中有一个专门的部分,解释如何在类中使用历史记录。

如果你看一下这个方法,你会发现它只是一个从上下文中获取历史变量的包装器

在你的课堂上,你可以自己做

import PropTypes from 'react-router';

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

SearchGithub.contextTypes = { history: PropTypes.history };
或者,您可以看一看,它提供了一个将mixin与ES6类一起使用的接口

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

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

reactMixin(SearchGitHub.prototype, History);

React的类接口之所以如此,有一些很好的理由。

React路由器建议的另一种方法是使用道具:

如果您不喜欢为了历史混入而在应用程序中使用createClass作为少数组件,那么有几个选项:

•将此.props.history从路线组件传递到需要它的组件

另一个选择是丹·普莱斯在上面的回答(这让我想:“使用上下文而不是道具有什么意义?”


源链接:

谢谢,在你看来,使用react Mix不是更“合适”的方式吗?如果它是正确的方式,类接口默认会支持它-在我看来。我只是担心ES6会有一个随机的大变化,不会被广泛采用,我不认为ES6没有被广泛采用的任何风险,特别是考虑到我们已经有了像Babel这样的工具链来使用它。然而,课程将会很难,但是正如React团队所指出的-。