ReactTable子组件中如何将数组成员拆分为单独行显示

嗨，我来帮你搞定这个问题～有两种可行的方法，你可以根据自己的需求来选：

方法1：不修改原数据结构，调整子组件实现 #

你当前的子组件错把整个row.original当成了子表的数据源，其实应该把Members数组单独提取出来，转换成子表需要的结构就行。修改后的代码如下：

return (
  <div>
    <ReactTable
      data={this.props.data}
      columns={envColumn}
      className="-striped -highlight"
      defaultPageSize={10}
      SubComponent={row => (
        // 将Members数组转成子表能识别的对象格式
        <ReactTable
          data={row.original.Members.map(member => ({ Member: member }))}
          columns={memberColumn} // 确保你的memberColumn里的accessor对应"Member"字段
          defaultPageSize={3}
          showPagination={false}
        />
      )}
    />
  </div>
)

这样子表就会自动把每个成员渲染成单独的一行，不会再挤在同一个单元格里了。

方法2：提前扁平化数据结构 #

如果你不需要主表的折叠/展开功能，或者更希望每行直接显示「环境+单个成员」的组合，可以先把原数据转换成你提到的扁平结构：

// 先写个函数处理数据
const flattenEnvData = (rawData) => {
  return rawData.flatMap(envItem => {
    return envItem.Members.map(member => ({
      Env: envItem.Env,
      Member: member
    }));
  });
};

// 在组件里使用处理后的数据
const flattenedData = flattenEnvData(this.props.data);

return (
  <div>
    <ReactTable
      data={flattenedData}
      columns={[
        { Header: '环境', accessor: 'Env' },
        { Header: '成员', accessor: 'Member' }
      ]}
      className="-striped -highlight"
      defaultPageSize={10}
    />
  </div>
)

这种方式更直接，数据结构和表格展示完全对应，适合不需要子组件折叠的场景。

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