react/mobx 中的对象渲染列表

Question

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

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

我正在尝试在我的网页上的嵌套 div 元素中呈现这些对象的值。基本上它是一个行面板，我表示为 divs。这是 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>

我不确定如何在我的组件中实现它 class！！从第一个div开始，这个

之后

                  <div role="rowgroup">

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

我尝试了十几种不同的方法，但我的网页上没有显示任何内容。我只是不明白如何遍历 'versions' 和 create/fill 面板中的对象列表。

Answer 1

迭代通常通过map将值数组转换为组件数组来完成。像这样：

versions = [ ... ]

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

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

Answer 2

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

现在，returned 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>
    )
}

react/mobx 中的对象渲染列表

rendering list of objects in react/mobx

javascript

reactjs

mobx-react