在子行中显示数组项（反应表）

Question

我正在使用 react-table 并且需要使用下面的数据结构创建子行。我已成功为数据数组中的每个对象创建了子行。但是，数据数组中的每个对象都包含另一个数组“类型”。我将如何让每一行将“类型”名称列为子行？到目前为止，我的代码如下：桌子：import React from 'react';import ReactTable from 'react-table';const Table = (props) => {  const subComponent = row => {    return (      <div>        Names of "types" here respectively for each object in data array        (no column headers or anything needed)      </div>    );  };  return (    <ReactTable data={ props.data }      columns={ props.columns }      SubComponent={ subComponent } />  );};export default Table;数据结构：const data = [  {    id: '12345',    name: 'sports',    types: [      {        name: 'basketball',        id: '1'      },      {        name: 'soccer',        id: '2'      },      {        name: 'baseball',        id: '3'      }    ]  },  {    id: '678910',    name: 'food',    types: [      {        name: 'pizza',        id: '4'      },      {        name: 'hamburger',        id: '5'      },      {        name: 'salad',        id: '6'      }    ]  }];

Answer 1

您可以在 useTable optios 上重写 getSubRows 方法。像这样的东西：

const getSubRows = useCallback((row) => {

  return row.types || [];

}, []);