如何渲染同一个react组件的几个中的一个？

Question

不知道是我今天脑子特别糊涂还是怎么了。我正在努力学习reactive，现在我有一个消息列表，是由一个数组渲染的，在每个消息里面我有一个按钮来渲染 "发送消息 "组件来回复消息。在每个消息里面，我有一个按钮来呈现 "发送消息 "组件来回复消息。我的问题是，当我按下 "回答 "按钮时，列表中的所有消息项都会渲染 "发送消息 "组件。我如何把它绑定到我点击回答的一条消息上呢？看看我的代码，你就会明白我的问题。

render() {
let messages = this.state.messages.map((item, key) =>
  <div>
    <ul key={item.id} className="messageList">
      <li><h3 className="messageTitle">{item.title}</h3></li>
      <li>{item.message}</li>
      <li className="messageSignature">from: {item.from}</li>
    </ul>
    {this.state.showSendMessage ? <SendMessage recipient={item.from} title={item.title}></SendMessage> : null}
    <button onClick={this.toggleShowSendMsg.bind(this)}>Answer</button>
  </div>
);

Answer 1

这是因为你的状态变量 "showSendMessage "对任何特定的消息都不是唯一的，因此它对所有的消息元素都是真的。

再添加一个状态变量 "key"。

render() {
let messages = this.state.messages.map((item, key) =>
  <div>
    <ul key={item.id} className="messageList">
      <li><h3 className="messageTitle">{item.title}</h3></li>
      <li>{item.message}</li>
      <li className="messageSignature">from: {item.from}</li>
    </ul>
    {this.state.showSendMessage && this.state.key == key ? <SendMessage recipient={item.from} title={item.title}></SendMessage> : null}
    <button onClick={this.toggleShowSendMsg.bind(key)}>Answer</button>
  </div>
);

并在你的toggleShowSendMsg方法中改变key的状态，就像你对showSendMessage所做的那样。