清单在一个容器不同类型对象的反应

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