时间戳

首页 > 解决方案 > 如何渲染几个相同的反应组件之一？

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

问题描述

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

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

标签： reactjscomponents

解决方案

这是因为您的状态变量“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>
);

并按照您对 showSendMessage 所做的方式更改您的 toggleShowSendMsg 方法中的键状态。

推荐阅读