javascript - Reactjs 将方法作为 Prop 传递给 child

Question

有没有办法将当前类的方法作为 props 传递给子类

举个例子；

var SignupModal = React.createClass({
mixins: [CheckMixin],
getInitialState: function(){
  return {
      'wizardstate': 0
  }
},
setWizardState: function(state){
    var that = this;
    switch (state){
        case 0:
           that.setState({'wizardstate': 0});
           break;
        case 1:
            that.setState({'wizardstate': 1});
            break;
        case 2:
            that.setState({'wizardstate': 2});
            break;
        case 3:
            that.setState({'wizardstate': 3});
            break;
        case 4:
            that.setState({'wizardstate': 4});
            break;
    }
},
render: function(){
    var temp;
    switch (this.state.wizardstate){
        case 0:
           temp = (<SignupSetup setWizardState={this.setWizardState}/>);
            break;
        case 1:
            temp = (<EmailSetup />);
            break;
        case 2:
            temp = (<PasswordSetup />);
            break;
        case 3:
            temp =  (<UsernameSetup />);
            break;
        case 4:
            temp = (<CategoriesSetup />);
            break;
    }
    return (<Modal {...this.props} title="Login" animation={false}>
            <div className="modal-body">
                <div>
                {temp}
                </div>
            </div>
        </Modal>)


var SignupSetup = React.createClass({
    render: function(){
        return (<Button onClick={this.props.setWizardState(1)}></Button>)
    }
});

我想将 SignupModal 的这个 setWizardState 方法作为 prop 传递给子 SignupSetup，但我得到了错误

未捕获错误:不变违规:replaceState(...):无法在现有状态转换期间更新(例如在 render 内)。渲染方法应该是 props 和 state.react.js:17122 的纯函数

Answer 1

问题出在这里:

<Button onclick={this.props.setWizardState(1)}></Button>

首先是错字(onClick，大写 C)。但主要问题是您正在调用 setWizardState，而 onClick 需要一个函数。您需要部分应用它。

onClick={this.props.setWizardState.bind(null, 1)}