React.js实现数组分两列展示：前25行一列其余一列

修改后的代码如下，通过数组切片将数据拆分到两列中：

<Row>
  {/* 第一列：前25条数据 */}
  <Col md="6">
    <Table>
      {formsList.slice(0, 25).map((item, index) => (
        <tr key={item.id}>
          <td>
            <div className="custom-control custom-control-alternative custom-checkbox mb-3">
              <input
                className="custom-control-input"
                id={item.id}
                name={item.checkBoxfieldName}
                type="checkbox"
                value={item.id}
              />
              <label className="custom-control-label" htmlFor={item.id}>
                {item.form_title}
              </label>
            </div>
          </td>
        </tr>
      ))}
    </Table>
  </Col>

  {/* 第二列：剩余数据 */}
  <Col md="6">
    <Table>
      {formsList.slice(25).map((item, index) => (
        <tr key={item.id}>
          <td>
            <div className="custom-control custom-control-alternative custom-checkbox mb-3">
              <input
                className="custom-control-input"
                id={item.id}
                name={item.checkBoxfieldName}
                type="checkbox"
                value={item.id}
              />
              <label className="custom-control-label" htmlFor={item.id}>
                {item.form_title}
              </label>
            </div>
          </td>
        </tr>
      ))}
    </Table>
  </Col>
</Row>

关键说明 #

• 使用slice(0, 25)提取数组的前25条元素，slice(25)提取从第26条开始的所有剩余元素
• 给每个<tr>添加key={item.id}，确保React列表渲染的性能和正确性（如果item.id不是唯一值，可替换为key={index}）
• 两个<Col md="6">会在中等屏幕及以上设备上各占一半宽度，实现两列布局

内容的提问来源于stack exchange，提问作者Muhammad Shafique Attari