reactjs - 有条件地向 React 中的列表添加一个额外的 LI

Question

我有一个简单的 React 组件，它遍历一个项目列表，每个项目都将它作为一个组件包含在内。诀窍是每第三个列表项，我想注入一个“特殊”的额外 li。

所以，我的“伪反应代码”看起来像这样：

return (<ul>
  {
     data.myItems.items.map((item, index) => {
        return (
           <li><MyItem key={index} {...item} /></li>
           { (index % 3 === 0) &&
              <li>Special LI</li>      
           }
        );
     })
  }
</ul>);

这显然不起作用，因为我return(..)可能会返回 2 个顶级元素（2 li's）。

我不能将 2 个 div 包装在其他东西中，它会破坏 ul/li 的语义（我需要它们都是深度 1 列表中的兄弟姐妹）。

我认为必须有一种简单的方法来做到这一点，而我忽略了这一点。

标签： reactjs

Answer 1

只需将其包装在一个空标签中即可。在反应中，它被称为Fragment。

return (<ul>
  {
     data.myItems.items.map((item, index) => {
        return (
           <>
             <li><MyItem key={index} {...item} /></li>
              { (index % 3 === 0) &&
                <li>Special LI</li>      
              }
           </>
        );
     })
  }
</ul>);