在React-Table中，如何在单击扩展器时从api获取数据并将其传递给子组件？

Question

我正在尝试实现一个表，在该表中有更多按钮可以从api加载更多数据。

获取的数据将在子组件中呈现。

如何使用react-table实现相同的功能？

这是我到目前为止尝试过的：

 <ReactTable
    data={data}
    freezeWhenExpanded={true}
    columns={[
      {
        Header: 'Name',
        accessor: 'name',
        width: 200
      },

      {
        Header: 'Email ID',
        accessor: 'emailId'
      },
      {
        Header: 'Phone',
        accessor: 'phone',
        maxWidth: 150
      },

      {
        expander: true,
        Header: () => <span>More</span>,
        width: 65,
        Expander: ({ isExpanded, ...rest }) => (
          <div>
            {isExpanded ? <span>&#x25B2;</span> : <span>&#x25BC;</span>}
          </div>
        ),
      }
    ]}
    SubComponent={() => (
      <div> fetched data from api to be shown here </div>
    )}
  />

Answer 1

这可能有助于从react table docs link