如何渲染几个相同的反应组件之一？

Question

我不知道我今天的大脑是不是特别糊状还是什么。 我试图学习反应，现在我有一个从数组呈现的消息列表。 在每条消息中，我都有一个按钮来呈现“发送消息”组件来回答消息。 我的问题是，当我按下“回答”按钮时，列表中的所有消息项都会呈现“发送消息”组件。 如何将它绑定到我点击回答的一条消息？ 看看我的代码，你就会明白我的问题：

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

这是因为您的 state 变量“showSendMessage”对于任何特定消息都不是唯一的，因此对于消息的所有元素都适用。

再添加一个 state 变量作为“键”。

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

并按照您对 showSendMessage 所做的方式更改您的 toggleShowSendMsg 方法中的密钥 state。