javascript - react 传递函数给 child 不工作

Question

我有一个将函数传递给子组件的 react 组件，并将其绑定(bind)到 onClick。但是当我点击时出现错误:

this.props.beBad is not a function, this.props.beBad is not defined

它看起来像这样:

var Dad = React.createClass({
  beBad: function(someInput) {
    alert('being bad ' + someInput);
  },
  render: function() {
    var Children = this.state.children.map(function(data, index) {
          return (
            <Child beBad={this.beBad} key={index}/>
          );
        });
        return (
            <div>
                {Children}
            </div>      
        );
  });

var Child = React.createClass({
  beBad: function() {
   this.props.beBad('some input');
  },
  render: function() {
    return(
     <div onClick={this.beBad}>
       be bad
     </div>
    );
  }
});

Answer 1

它看起来不像这是你所期望的。当使用 React.createClass 时，React 将自动绑定(bind)正确的 this IFF 调用位于函数的顶层，因此在这种情况下它将正确自动绑定(bind):

render: function() {
  return (
   <div onClick={this.beBad}> // autobound
     be bad
   </div>
  );
}

但不在这里:

var Children = this.state.children.map(function(data, index) {
  return (
    <Child beBad={this.beBad} key={index}/> // `this` is not what you expect
  );
});
return (
  <div>
    {Children}
  </div>
);

原因是 map 正在创建一个新的作用域，而 this 不再是您所期望的，并且 React 无法为您自动绑定(bind)它。您需要显式传递this:

var Children = this.state.children.map(function(data, index) {
  return (
    <Child beBad={this.beBad.bind(this)} key={index}/> // bind `this`
  );
}, this); // pass `this`

注意:看到其他响应，React 可能会在映射内为您自动绑定(bind)它，但一般来说，我不会依赖自动绑定(bind)，显式优于隐式。另外，如果您曾经使用 ES6 类编写 React，它不会执行自动绑定(bind)。