在react / mobx中渲染对象列表

Question

我在jsx类中有一个对象列表。 现在假设它是固定的对象列表

versions = [
{owner: "luca", date: "today", fw: "00"},
{owner: "thomas", date: "tomorrow", fw: "00"},
{owner: "peter", date: "yesterday", fW: "00"},];

我正在尝试在网页上的嵌套div元素中呈现这些对象的值。 基本上，这是我代表div的一组行。 这是它的html

<div className="fc-revisions-sidebar revisions-panel flex-vertical flex-grow-1">
        <div className="fc-revisions-sidebar-header fc-revisions-sidebar-header-bg-color-brand">
            <div className="fc-revisions-sidebar-title">Version history</div>
        </div>
        <div className="fc-revisions-sidebar-revisions-list-container">
            <div className="fc-revisions-sidebar-revisions-list">
                <div role="rowgroup">
                    <div className="fc-revisions-collapsible-panel" role="button">
                        <div className="fc-revisions-collapsible-panel-container">
                            <div className="fc-revisions-row fc-revisions-row-selected" role="row" aria-selected="true" aria-level="1">
                                <div className="fc-revisions-row-content-wrapper">
                                    <div className="fc-revisions-row-header fc-row-content">
                                        <div className="fc-revisions-row-text-box" rows="1" maxLength="80" aria-multiline="false">
                                            **{version.date}**
                                        </div>
                                    </div>
                                    <div className="fc-revisions-row-content fc-row-content" role="presentation">
                                        <div className="fc-revisions-row-collaborator-list">
                                            <div className="fc-revisions-row-collaborator">
                                                <span className="fc-versions-rown-collaborators-label">Created by **{version.owner}**</span>
                                                <span className="fc-revisions-row-collaborator-name">**{version.fw}**</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

我不确定如何在我的组件类中实现它！ 从第一个div开始之后

                  <div role="rowgroup">

我在面板中创建每一行的html代码开始。 我想遍历列表中的对象，并使用该列表中的正确数据创建/填充面板中的每一行

我尝试了十多种方法，但是网页上没有任何显示。 我只是不了解如何遍历“版本”中的对象列表以及如何创建/填充正在进行的面板。

Answer 1

通常通过map值数组map到组件数组来完成迭代。 像这样：

versions = [ ... ]

return (
  <div>
    <div>Version History</div>
    {
      versions.map(version =>
        <div key={version.date}>
          {version.date}
        </div>
      )
    }
  </div>
)

请注意，为使Reacts对帐在使用新值数组进行潜在重新渲染时能够正常工作，该数组中的外部元素应具有唯一的key属性，以便React可以在下一次渲染时快速识别出该数组中所有已删除或已添加的值。

Answer 2

假设您有使用const在render内部声明的对象数组。 您可以使用.map，.forEach，for循环等方法来迭代数组。在您的情况下，我希望使用.map进行迭代，因为map返回新数组。 因此，在地图内部构造jsx元素并返回它们。

现在，返回的jsx元素将放置在versionItems数组中。 您可以使用{}之类的表达式在render return中调用它。

render(){
     const versions = [
       {owner: "luca", date: "today", fw: "00"},
       {owner: "thomas", date: "tomorrow", fw: "00"},
       {owner: "peter", date: "yesterday", fW: "00"},];

     const versionItems = versions.map((item, index) => {
      return (
         <div key={"key"+index} role="rowgroup">
              //just get all your property values here using item.owner, item.date etc
        </div>
     )
 });
    return(
         <div>
             {versionItems}
         </div>
    )
}