在 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

假设您在渲染中使用 const 声明了一组对象。您可以使用 .map、.forEach、for 循环等对数组进行迭代。在您的情况下，我更喜欢 .map 进行迭代，因为 map 返回新数组。所以在 map 内部构造 jsx 元素并返回它们。

现在，返回的 jsx 元素将被放置在 versionItems 数组中。您可以在渲染返回中使用类似 {} 的表达式来调用它。

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

Answer 2

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

versions = [ ... ]

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

请注意，为了让 Reacts 协调在可能使用新的值数组重新渲染时正常工作，数组中的外部元素应该具有唯一的 key 属性，以便 React 可以快速识别任何已删除或添加的值下次渲染时的数组。