Facebook React:不变违规和元素,而不是自动挂载

Question

我通过一个小例子来学习Facebook React.我决定检查我的this绑定知识是否正常,所以我创建了三个React.class可变状态在父级中,而中间只将回调传递给子级来操作它.

基本结构:

- MainFrame (states here)
  - FriendBox (only pass the callbacks for change states to Friend)
    -Friend

注意,我可以使用,transferThisProp但实际上我更喜欢这个"手动".

FriendBox渲染包含:

var allFriends = this.props.friends.map((function (f) {
  return(
    <Friend key = {f.id}
            name = {f.name}
            select = {this.props.select}
    />
  )
}).bind(this))  

朋友渲染包含这个:

return(
  <div className="friend">
    {this.props.name}
    <a href="" onClick={this.props.select(this.props.key)}>
      select
    </a>
  </div>
)

运行我的代码时,我收到以下消息:

MainFrame.sendToFriendH:
  Invariant Violation: receiveComponent(...):
  Can only update a mounted component. react.js:7276
Uncaught Error: Invariant Violation:
  receiveComponent(...): Can only update a mounted component. 

有趣的是,当使用chrome的react扩展时,我可以检查虚拟DOM是否正常,绑定是否正常.除了第一个Friend元素的Child组件之外,一切看起来都很好_lifeCycleState: "UNMOUNTED"

这让我想到的是,我正在犯一个错误,底部的孩子没有被渲染和安装.所有代码都失败了,但我不确切知道原因.任何人都可以告诉我为什么元素不会自动挂载,我该如何解决？

完整代码:http://jsfiddle.net/RvjeQ/

Answer 1

当你写作

onClick={this.props.select(this.props.key)}

您正在this.props.select立即调用处理程序并将其结果设置为onClick处理程序.我猜你想做一个部分应用程序,你可以用箭头函数做:

onClick={(e) => this.props.select.bind(this.props.key, e)}

如果你不关心事件arg,你可以跳过它.

您也可以.bind()这样使用:

onClick={this.props.select.bind(null, this.props.key)}