React-Table实现数组元素在单元格内独立展示的方法

问题场景 #

我尝试用react-table渲染如下结构的数据：

[
  {
    companyName: "Barclays Bank Plc",
    tenancies: ["G.01 @ Newbuilding"],
    status: "Active",
    accountNumber: "EX209302",
    logo: "companylogo1",
  },
  {
    companyName: "Boeing AerospaceLtd",
    tenancies: ["G.01 @ Newbuilding", "G.02 @ Newbuilding"],
    status: "Active",
    accountNumber: "EX209302",
    logo: "companylogo1",
  }
]

我的列定义写法无法正常工作：

{
  Header: "Tenancies",
  accessor: "tenancies",
  Cell: (tableProps) => (
    <div>{tableProps.cell.value.forEach((item) => item)}</div>
  ),
}

需求：希望将数组中的每个元素放在独立的HTML标签（如div）中，方便在表格单元格内设置样式和分隔，求最佳实现方式。

解决方案 #

问题根源 #

forEach方法仅遍历数组执行操作，没有返回值，所以直接在JSX中使用forEach不会渲染任何内容。需要改用map方法，它会返回一个新的元素数组，正好可以作为JSX的子元素。

基础实现代码 #

{
  Header: "Tenancies",
  accessor: "tenancies",
  Cell: ({ cell }) => (
    <div className="tenancies-container">
      {cell.value.map((item, index) => (
        <div key={index} className="tenancy-item">
          {item}
        </div>
      ))}
    </div>
  ),
}

关键说明 #

• 用map遍历tenancies数组，每个元素渲染为独立的div
• 必须给每个子元素添加key属性（示例用index作为key，若数组元素有唯一标识，优先使用唯一标识）
• 外层容器div便于统一控制单元格内的布局，子元素类名可用于设置样式（比如给.tenancy-item添加margin-bottom或border-bottom实现分隔效果）

优化版（兼容空数组场景） #

如果存在数组为空或未定义的情况，可以增加判断避免报错，同时展示友好提示：

{
  Header: "Tenancies",
  accessor: "tenancies",
  Cell: ({ cell }) => {
    const tenancies = cell.value || [];
    return (
      <div className="tenancies-container">
        {tenancies.length > 0 ? (
          tenancies.map((item, index) => (
            <div key={index} className="tenancy-item">
              {item}
            </div>
          ))
        ) : (
          <div className="no-tenancies">无租约信息</div>
        )}
      </div>
    );
  },
}

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