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

在一个容器中列出不同类型的对象

1 个答案: