React组件中按索引成对渲染ProgressBar到Row的正确实现方式

嘿，我来帮你搞定这个问题～你的原代码没法编译是因为JSX不允许拆分标签的开闭部分单独渲染——JSX本质是React.createElement()的语法糖，每一段条件渲染的内容都必须是完整的、可被解析的React元素，单独的<div>或者</div>都是不完整的结构，编译器根本不知道该怎么处理它们。

要实现每行两个ProgressBar的需求，正确的思路是先把数据源分组，每两个元素为一组，然后每组对应一个<div className="row">，组内的每个元素再渲染成对应的列内容。

具体实现代码 #

假设你的组件接收一个包含所有ProgressBar数据的数组items（比如this.props.items），我们可以先用reduce方法把数组分成每两个元素一组的二维数组，再进行渲染：

import React from 'react';
import ProgressBar from '你的ProgressBar组件路径';

class ProgressBarGroup extends React.Component {
  // 抽离分组逻辑，让render更清晰
  groupItems = (items) => {
    return items.reduce((acc, item, index) => {
      const groupIndex = Math.floor(index / 2);
      // 如果当前分组不存在，就创建一个空数组
      if (!acc[groupIndex]) {
        acc[groupIndex] = [];
      }
      acc[groupIndex].push(item);
      return acc;
    }, []);
  };

  render() {
    const groupedItems = this.groupItems(this.props.items);

    return (
      <div>
        {groupedItems.map((group, groupIndex) => (
          <div key={groupIndex} className="row mt-1">
            {group.map((item, itemIndex) => (
              // 用React.Fragment包裹避免额外DOM节点，也可以用空标签<>...</>
              <React.Fragment key={itemIndex}>
                <div className="col-1">{item.title}</div>
                <div className="col-5">
                  <ProgressBar
                    variant={item.color}
                    now={item.now}
                    max={item.max}
                    label={item.label}
                  />
                </div>
              </React.Fragment>
            ))}
          </div>
        ))}
      </div>
    );
  }
}

export default ProgressBarGroup;

代码说明 #

1. 分组逻辑：reduce方法遍历原数组，把每两个元素放到同一个子数组里，这样后续渲染时每个子数组就对应一行。
2. 渲染逻辑：遍历分组后的数组，每个分组对应一个row，再遍历分组内的元素渲染成对应的列。即使原数组长度是奇数，最后一行只会有一个ProgressBar，也不会出现结构错误。
3. key的使用：遍历渲染时一定要加key属性，帮助React高效更新DOM，这里用分组索引和元素索引组合保证唯一性（如果数据有唯一id，用id会更好）。

这样写不仅能正常编译，还能完美实现你每行两个ProgressBar的需求，代码结构也更清晰易维护～

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