React中如何将循环内容包裹在单个带className的div内？

你原来的写法行不通，是因为JSX并不是普通字符串，<div className="field-group">和</div>不能拆分开单独push到数组里——JSX会被编译成React.createElement的调用，拆分后无法形成合法的React元素，自然无法正常渲染。

下面是几种正确的实现方式：

方式一：直接用div包裹循环结果 #

把循环生成的内容直接放在field-group div内部，不用拆分标签：

function IterateSectionFields({ props, tabIndex, sectionIndex }) {
  return (
    <div>
      <div className="field-group">
        {(() => {
          const output = [];
          for (var i = 0; i < sectionFieldList.length; i++) {
            // 这里写你的处理逻辑
            output.push(<div key={i}> A few things </div>);
          }
          return output;
        })()}
      </div>
    </div>
  );
}

方式二：用map替代for循环（React推荐写法） #

React中更常用数组的map方法来生成元素列表，代码更简洁：

function IterateSectionFields({ props, tabIndex, sectionIndex }) {
  return (
    <div>
      <div className="field-group">
        {sectionFieldList.map((_, index) => {
          // 这里写你的处理逻辑
          return <div key={index}> A few things </div>;
        })}
      </div>
    </div>
  );
}

方式三：先收集子元素再包裹 #

如果一定要用for循环收集元素，可以先把所有子元素存到数组，再一次性包裹进field-group div：

function IterateSectionFields({ props, tabIndex, sectionIndex }) {
  return (
    <div>
      {(() => {
        const children = [];
        for (var i = 0; i < sectionFieldList.length; i++) {
          // 这里写你的处理逻辑
          children.push(<div key={i}> A few things </div>);
        }
        return <div className="field-group">{children}</div>;
      })()}
    </div>
  );
}

注意：不管用哪种方式，都要给循环生成的每个元素加上key属性，这是React的要求，用来优化渲染性能并避免警告。

内容的提问来源于stack exchange，提问作者CheeseNWine