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

这是一个很好的例子，https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/archives/v6-examples/react-table-sub-components

根据我的最佳猜测，您的代码将如下所示：

import React from 'react';
import ReactTable from 'react-table';

const Table = (props) => {
  const subComponent = row => {
    return (
      <div>
        row.Original.types.map((type, idx) => (
           <div>{{type.id}}</div>
           <div>{{type.name}}</div>
        ))
      </div>
    );
  };

  return (
    <ReactTable data={ props.data }
      columns={ props.columns }
      SubComponent={ subComponent } />
  );
};

export default Table;

Answer 2

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

const getSubRows = useCallback((row) => {
  return row.types || [];
}, []);

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

2 个答案: