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

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) => {&nbsp; return row.types || [];}, []);