リストは、私はそうのようなオブジェクトの配列を持っている

Question

を反応させる：

[{ 
    "message": { 
    "from": "one", 
    "body": "lorem" 
    } 
}, 
{ 
    "message": { 
    "from": "two", 
    "body": "ipsum" 
    } 
}, 
{ 
    "point": { 
    "topic": "lorem", 
    } 
}] 

私は彼らのために、適切ななどしばらく間でオブジェクトを取得するようにどのように私はそれらをレンダリングする必要がありますメッセージオブジェクトが来ると、それらは連続してそのulに挿入されますが、ポイントオブジェクトが来ると、ulを開き、メッセージオブジェクトが再び来るまでポイントオブジェクトを追加します...

このように私のレンダーコードはどのように見えますか？今、私はそれが上記のようにうまくいくようにする方法を知らない：

render: function() { 
     var dMessages = sections.map(function(section, i) { 
      if (section.hasOwnProperty('message')){ 
      return <Message key={i} id={i} message={section.message} />; 
      } 
      if (section.hasOwnProperty('point')){ 
      return <Point key={i} id={i} point={section.point} />; 
      } 
     }); 

     return (
     <div className="main"> 
      <ul className="message"> 
      {dMessages} 
      </ul> 
     </div>); 
    } 

Answer 1

質問で与えられたjsonオブジェクトの構造で解決することはできませんでしたが、メッセージオブジェクトのコンテナ配列を追加するだけで、全体の問題は簡単に解決できるようです。

新構造：

[{ "dialog": [ 
{ 
    "message": { 
    "from": "one", 
    "body": "lorem" 
    } 
}, 
{ 
    "message": { 
    "from": "two", 
    "body": "ipsum" 
    } 
} 
]}, 
{ 
    "point": { 
    "topic": "lorem", 
    } 
}] 

新しいレンダリング機能：

render: function() { 
     var debateMessages = sections.map(function(section, i) { 
      if (section.hasOwnProperty('dialog')){ 
      return <Dialog key={i} id={i} dialog={section.dialog} />; 
      } 
      if (section.hasOwnProperty('point')){ 
      return <Point key={i} id={i} point={section.point} />; 
      } 
     }); 

     return (
     <div className="main"> 
      {dMessages} 
     </div>); 
    }