默认使用 react-table 展开子组件行答案

【问题标题】：Expand subcomponent rows by default with react-table默认使用 react-table 展开子组件行
【发布时间】：2019-11-02 16:25:31
【问题描述】：

我正在使用 react-table 显示一些行，每一行都有一个子组件，它只是呈现更多的“子行”。但是，您必须单击该行才能显示子行。 React-table 没有设置然后默认扩展。有一些关于这样做的讨论，但我似乎无法用我的例子做任何事情。

当前在加载时看起来像这样：

单击每一行后（我如何尝试使其默认显示）

Table.js

import React, { Component } from 'react';
import ReactTable from 'react-table';
import { columns, subComponent } from './tableSetup';


class Table extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <ReactTable data={ data }
        columns={ columns }
        SubComponent={ subComponent }
        expandedRows={ true }
        resizable={ false }
        minRows={ 1 }
        pageSize={ 8 }
        showPageSizeOptions={ false } />
    );
  }
}

export default Table;

tableSetup.js 与示例数据从“反应”导入反应；

export const columns = [
  {
    Header: () => (
      <div />
    ),
    accessor: 'name',
    maxWidth: 300,
    Cell: row => (
      <div className='first-column'>{row.value}</div>
    )
  }
];

export const subComponent = row => {
  return (
    <div>
      {row.original.types.map((type, id) => {
        return (
          <div className='subRow' key={ id }>{ type.name }</div>
        );
      })}
    </div>
  );
};

export 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'
      }
    ]
  }
];

【问题讨论】：

标签： reactjs react-table-v6

【解决方案1】：

为了从头开始扩展所有行，您可以使用道具defaultExpanded，在其中您提供所有要扩展的行索引。（在这种情况下，全部），像这样：

  render() {
    // Set all the rows index to true
    const defaultExpandedRows = data.map((element, index) => {return {index: true}});
    return (
      <div>
        <ReactTable
          data={data}
          // Use it here
          defaultExpanded={defaultExpandedRows}
          columns={columns}
          defaultPageSize={10}
          className="-striped -highlight"
          SubComponent={subComponent}
        />
      </div>
    );
  }

更多信息可以关注here。

【讨论】：

【解决方案2】：

为了在 react-table v6 中获取多个子行 1.首先让你的数据数组像这样

     data = [
            0:{name:'abc', age: 34, friends: [
                        0:{name:'xyz', age: 12, friends:[]}
                        1:{name:'john', age: 45, friends:[]}
                        2:{name:'kim', age: 23 , friends: [
                            0:{name:'ray', age: 15}
                            ]
                        }
                    ]
            }
            1:{name:'john', age: 45, friends:[]}
        ]

将子行键添加到反应表中

    <ReactTable 
                data={data}
                columns={ columns }
                expandedRows={true}
                subRowsKey= {'friends'}
                />

然后在最后一步在表格列中使用 Expender 回调

       columns = [
            {
                Header: "Name",
                accessor: 'name'
            },
            {
                Header: "AGE",
                accessor: 'age'
            },
            {
                Header: "Have Friend",
                Expander: ({ isExpanded, ...rest }) =>
                    {
                      if(rest.original.friends.length === 0) {
                        return null;
                      }
                       else {
                        return (
                          <div>
                            {isExpanded
                                    ? <span>-</span>
                                    : <span>+</span>
                            }
                          </div>
                        );
                      }
                    },
            },
        
        ]

【讨论】：

【解决方案3】：

Orlyyn 的回答有效，但我不明白，为什么我们需要返回一个带有索引和true 的对象？只需返回true 即可，以后可以轻松更新。

const defaultExpandedRows = data.map(() => {return true});

要使切换工作，您可以将defaultExpandedRows 存储在状态中并将索引的值更改为false onExpandedChange

【讨论】：

这将如何与subRows 一起使用？我有这个适用于行，但如果有子行，它们不会展开。

【解决方案4】：

https://codesandbox.io/s/pjmk93281j?file=/index.js

// all the rows are expanded now
let expandedRows = data.map((i, index) => { index:true }); 

const [expanded, setExpanded] = useState(expandedRows);

<ReactTable data={data}
    ...
    expanded={expanded}
    onExpandedChange={(expanded, index, event) => {
        // console.log(index, expanded);
        // don't for get to save the 'expanded'
        // so it can be fed back in as a prop

        console.log(expanded);
        setExpanded(expanded);
    }}
/>

试试吧，它对我有用。

【讨论】：