Question

我仅使用这个简单的React组件。

我想在函数＆＃39; working＆＃39;中访问this.setState（）和＆＃39; group.notWorking＆＃39;。

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

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

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

如果你想传递整个组，你需要使它成为一个返回一个对象并绑定它的函数：

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

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

如何在React中将函数组作为道具传递？

1 个答案: