如何渲染幾個相同的反應組件之一？

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。