reactjs - 如何在 React 中将函数组作为 props 传递？

Question

我仅使用这个简单的 React 组件作为示例。

我想在函数“working”和“group.notWorking”中访问 this.setState()。

var myComponent = React.createClass({
  getInitialState: function() {
    return {};
  },

  working: function() {
    this.setState({ test: true });  //this is myComponent
  },

  group: {
    notWorking: function() {
      console.log(this); //this is window
    }
  },

  render: function() {
    return (
        <div>
          <ChildComponent working={this.working} group={this.group}/>
        </div>
    );
  },
});

我的问题是如何传递分组在一个对象中的函数，或者是否有任何最佳实践，以避免将所有函数一一传递给子组件。

Answer 1

您需要传递它的绑定(bind)版本。

<ChildComponent working={this.working} group={this.group.notWorking.bind(this)}/>

如果你想传递整个组，你需要将其设置为一个返回对象并绑定(bind)它的函数:

group: function() {
    return {
        notWorking: function() {
          console.log(this);
        }.bind(this)
    };
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind