如何讓react-table的第一個子組件默認打開並手動打開其他子組件

Question

這是嵌套的反應表。 第一次渲染 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>
     )
   }}
/>

上面的代碼使我的第一行子組件默認打開，但是，我無法打開任何其他行子組件。

因此，任何人都可以通過為此提供解決方案來幫助我。

Answer 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”將擴展您作為參數發送的行索引，它還允許反應表折疊/隱藏任何其他行。