反応jsxレンダリング関数で各子の後ろに要素を追加する方法はありますか？

Question

私は、次のコードを持っている：私はthis.props.messages.map上のそれぞれの子の後this.props.replied_messages.mapを追加したい

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

} 

を。

例データ：

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.messages.map上のそれぞれの子の後this.props.replied_messages.mapを追加したいです。

あなたがしたいように聞こえるのは、スレッドメッセージリストをレンダリングすることです。すべての返信が親メッセージに従う<Message>コンポーネントのフラットリストをレンダリングする場合は、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> 

Example in 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> 

Example in CodePen.