如何使react-table的第一个子组件默认打开并手动打开其他子组件答案

【问题标题】：How to make first sub-component of react-table open by default and open other sub-components manually如何使react-table的第一个子组件默认打开并手动打开其他子组件
【发布时间】：2018-12-20 08:22:09
【问题描述】：

这里是嵌套的反应表。第一次渲染 react-table 时，默认情况下应该打开第一个子组件，并且我应该能够手动打开其他行的子组件。

我试过设置

<ReactTable
  data={arr[]}
  expanded={{0:true}}
  columns={...}
  subcomponent={row => {
    return (
      <div >
        <ReactTable
          data={arr[]}
          expanded={{0:true}}
          columns={...}
          subcomponent={row => {
            return(<div>{...}</div>)
        />
      </div>
     )
   }}
/>

上面的代码使我的第一行子组件默认打开，但是我无法打开任何其他行子组件。

那么，任何人都可以通过提供解决方案来帮助我。

【问题讨论】：

你能用示例数据创建 stackbliz 示例吗？

标签： javascript reactjs react-table

【解决方案1】：

可以使用“defaultExpanded”属性，如：

<ReactTable
  data={arr[]}
  defaultExpanded={{0:true}}
  columns={...}
  subcomponent={row => {
    return (
      <div >
        <ReactTable
          data={arr[]}
          expanded={{0:true}}
          columns={...}
          subcomponent={row => {
            return(<div>{...}</div>)
        />
      </div>
     )
   }}
/>

默认情况下，“defaultExpanded”将扩展您作为参数发送的行索引，它还允许 react-table 折叠/隐藏任何其他行。

【讨论】：