javascript - 当我需要在元素之间动态添加标记时，如何解决 React JSX 的相邻组件包装器错误？

Question

我有一个TypeList将显示 Type 的组件 TableView 中的组件如下所示:

我需要给TypeList CSS 与 display: table然后为列出的每三种类型添加行，因此每三种类型需要嵌套在 <div class="table-row"></div> 中。我尝试使用下面的逻辑执行此操作，但出现相邻的 JSX 错误。我可以改变什么来解决这个问题吗？

TypeList.js

import Type from './Type'

const TypeList = ({info}) => (
  <ul className="table">
    <div class="table-row">
    {
      info.map(function (type, idx) {
        // onclick details taken care of here
        if (idx === map.length - 1){
          return (
            <Type key={idx} name={type.name} />
            </div>
          )
        } else if (idx === 2) {
          return (
            <Type key={idx} name={type.name} />
            </div>
            <div class="table-row">
          )
        } else {
          return (<Type key={idx} name={type.name} />)
        }
      })
    }
  </ul>
)

Answer 1

这有点难看，但这是我找到的解决此类问题的唯一解决方案。

function renderstuff(...) {
    return (
        <div> 
            (...)
        </div>
    ).props.children;
}

此函数将您的内容呈现在 <div> 中包装器，然后通过返回 .props.children 剥离包装器.

它可能适用于您的情况，只需提取 .map 的内容即可回调到函数中，包装您的标记并返回 props.children wrapper 。