我如何在React jsx渲染函數中的每個孩子之后添加元素？

Question

我有以下代碼：

class MessageList extends Component {

  render () {
    return (
      <ul>
        {
          this.props.messages.map((message) => {
            return <Message key={message.id} message={message} />
          })
        }
        {
          this.props.replied_messages.map((message) => {
            return <Message key={message.id} message={message} />
          })
        }
      </ul>
    )
  }

}

我想在this.props.replied_messages.map每個孩子之后添加this.props.messages.map 。

示例數據：

let initialState = {
  messages: [
    {
      id: 0,
      timestamp: 1464092864076,
      text: 'holas'
    },
    {
      id: 1,
      timestamp: 1464125678372,
      text: 'other comment'
    }
  ],
  replied_messages: [
    {
      id: 0,
      message_replied_id: 0,
      timestamp: 1464092864076,
      text: 'eyyy'
    },
    {
      id: 1,
      message_replied_id: 0,
      timestamp: 1464125851108,
      text: 'a reply'
    },
    {
      id: 2,
      message_replied_id: 1,
      timestamp: 1464125909151,
      text: 'other comment reply'
    }
  ]
}

Answer 1

我想在this.props.replied_messages.map每個孩子之后添加this.props.messages.map 。

聽起來您想要做的是呈現一個線程化消息列表。 如果要呈現<Message>組件的平面列表，其中所有答復都跟隨其父消息，則可以使用嵌套的map來做到這一點： map messages ，然后使用replied_messages上的filter獲得對該消息的所有答復，然后將兩者（該消息的消息+答復）組合到一個數組中，並將該數組map到<Message>組件。

<ul>
  { this.props.messages.map(message =>
    [
      message, 
      ...this.props.replied_messages.filter(reply => reply.message_replied_id == message.id)
    ].map(message => <Message key={message.id + "_" + message.message_replied_id} message={message}/>)
  ) }
</ul>

CodePen中的示例。

（請注意，由於您的messages和replied_messages有重復的id值，我不得不做出的key基於兩個。最好你不會有重復的ID是這樣的。）

---

但如果我是你，我只想建立一個線程消息榜第一 ，並呈現分級部件樹回復其父消息的孩子 。 例如，您可以像這樣從兩個數組構建線程消息：

function messagesToThreads(messages, replied_messages) {
  return messages.map(message => {
    return {
      message,
      replies: replied_messages.filter(reply => reply.message_replied_id == message.id)
    }
  });
}

並渲染嵌套的 <Message>項目以創建層次結構列表：

  <ul>
    { messagesToThreads(this.props.messages, this.props.replied_messages).map(thread =>
      <Message key={thread.message.id} message={thread.message}>
        { thread.replies.map(reply => <Message key={reply.id} message={reply} />) } 
      </Message>
    ) }
  </ul>

CodePen中的示例。