React-Table：为选定的行嵌套数据显示嵌套表答案

【问题标题】：React-Table: Show Nested Table for a selected rows nested dataReact-Table：为选定的行嵌套数据显示嵌套表
【发布时间】：2019-12-27 06:24:05
【问题描述】：

如何告诉react-table 为选定的Rows 嵌套子对象显示sub-component/react-table？

例如，

[
   {
      "objectA":{
         "field1":"field1Data",
         "nestedObjectA":{
            "nestedfield1":"nestedfield1Data",
            "nestedNestedObjectA":{
               "nestedNestedObjectA":"nestedNestedObjectA",
               "nestedNestedObjectB":"nestedNestedObjectB"
            }
         }
      }
   }
]

在上面的 json 中，我将为 objectA 创建 react-table，它将显示其字段。一旦用户选择了 objectA 行，我想为所选行的嵌套数据显示一个嵌套表。

在 react-table docs here 或 here 给出的示例中，并没有包含太多复杂的情况。这里主要关心的是告诉 react-table 我已经选择了一行，对于这个选择的行数据，我们必须在它下面创建一个单独的表。我怎样才能做到这一点？谢谢。

【问题讨论】：

标签： javascript reactjs datagrid nested react-table

【解决方案1】：

我自己想通了。 但如果其他人有更优雅的解决方案，请随时分享。

在上面共享的链接中的示例代码中添加了几行。 data 和来自subComponent 的行在这方面有一定的意义。

简而言之，我在data 中调用一个映射函数来检查子组件中row.original 中的id 是否与data 项目中的id 匹配。

总之，

data={rowData => rowData.map(item => { 
  if (item.id === row.original.id) {
    return item.nestedChild;
    } else {
      // Since an empty array is expected otherwise React-Table will //result in error.
      return []; 
    }
}

rowData 是用作嵌套 React-Table 源的实际数据。 row.original 是原始项目的数据，可用于检查数据是否匹配。

例子，

<ReactTable
          data={data}
          columns={columns}
          defaultPageSize={10}
          className="-striped -highlight"
          SubComponent={row => {
            return (
              <div style={{ padding: "20px" }}>
                <em>
                  You can put any component you want here, even another React
                  Table!
                </em>
                <br />
                <br />
                <ReactTable
                    data={rowData =>
                    rowData.map(item => {
                      if (item.id === row.original.id) {
                        return item;
                      } else {
                        return [];
                      }
                    })
                  }
                  columns={columns}
                  defaultPageSize={3}
                  showPagination={false}
                  SubComponent={row => {
                    return (
                      <div style={{ padding: "20px" }}>
                        Another Sub Component!
                      </div>
                    );
                  }}
                />
              </div>

【讨论】：