这指向ReactJs中的setState

Question

我很难理解以下React代码中的super user关键字。我希望你们能清除我。请检查我的简单代码React JS。

Board Class render

this

在评论课

return( <Comment key={i} index={i}  >
                            {value}
                        </Comment>

1. 我从constructor(){ super(); this.state = {editing:false} } render(){ return(<div className="commentContainer"> <p>{this.props.children}</p> <button onClick={this.edit} className="button-primary">Edit</button> <button onClick={this.remove} className="button-danger">Remove</button> </div>) } edit(){ alert('comment') this.setState({editing:true}); } 组件调用Comment，因此在评论渲染函数Board中会引用this或Board类？

2. 如果它指向Board，则单击编辑按钮时，它应显示Comment类中未定义edit()函数的错误？

3. 如果它指向Board类（这实际上是因为当我点击它时发出警报）然后在编辑功能下我正在使用Comment所以它应该更新编辑状态而不是发生并给出＆＃34;未定义的setState＆＃34;

的错误

当我使用

时

this.setState

它起作用，这意味着它没有指向评论，这就是为什么我需要将它与Comment绑定。完全混乱，我看到一个视频，其中只是this.setState工作，

1. 此外，如果它指向评论，那么它如何获得this.props.children的价值

请有人清楚我。

Answer 1

使用React类语法无法在render()函数中自动绑定它。如果您使用React.createClass({})代替class extends React，则会自动进行。如果您更喜欢使用类，则可以在类构造函数中手动绑定带有this的方法：

constructor() {
   super();
   this.edit = this.edit.bind(this);
}

您还可以使用es2016语法的新功能（使用一些转换器配置）并使用胖箭头函数作为类实​​例属性：

class MyComponent extends React.Component {
   state = { editing: false };
   edit = () => { /* method content */ }
   render() {
      // ...
   }
}

有关更多信息，请参阅this article。