Javascript Facebook的反应：不变的违规和元素比没有'；t自动挂载

我通过一个小例子来学习Facebook的反应。 我决定检查我对

这个

绑定的了解是否正确，因此我创建了三个

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>
)

有趣的是，在使用针对chrome的react扩展时，我可以检查虚拟

DOM

是否正常，绑定是否正常。除了第一个

Friend

元素的子组件显示

\u lifeCycleState:“UNMOUNTED”

这让我觉得我犯了一个错误，底部的子对象没有被渲染和挂载。 所有的代码都失败了，但我不知道确切的原因。 有人能告诉我为什么元素没有自动安装，我如何修复它

完整代码：

当您编写

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)}

---

不管它值多少钱，你都不必这么做

this.props.friends.map((function(){ ... }).bind(this));

的第二个参数允许您设置回调函数的上下文。用这个代替

this.props.friends.map(function(f){ ... }, this);

您还可以使用具有词法范围的

this.props.friends.map(f =>
  <Friend key = {f.id}
          name = {f.name}
          select = {this.props.select}
  />
)

this.props.friends.map（f=>
)

---

此外，当你使用复杂的道具时，你可以做如下事情

var props={
关键字：f.id，
姓名：f.name，
选择：this.props.select
};

非常感谢你的回复Ben，我还需要学习很多javascript:D。。。这就像一个符咒（在修复代码中的其他错误后：D）谢谢！！。。。我也被这件事搞砸了。如果您使用的是es6并且已经销毁了这些变量，那么就可以使用

onClick={（）=>select（key）}

this.props.friends.map(f =>
  <Friend key = {f.id}
          name = {f.name}
          select = {this.props.select}
  />
)