首页 > 解决方案 > React-Table 获取对父组件中行的引用

问题描述

我在组件中有一个反应表组件。表的数据取自 redux 存储。我有一个按钮可以将数据导出到父组件中的 excel 中,并且需要访问子反应表组件中当前过滤、排序或分组的行以进行导出。

    const App = () => {

        const columns = React.useMemo(
            () => [
              {
                Header: 'ID',
                accessor: 'id',
              }, etc...
            ],[]);

        const myData = useSelector((state) => state.myData.myData);
        const data = React.useMemo(() => myData, [myData]);           

        const [rowsToExport, setRowsToExport] = useState([]);
        <CSVLink filename='table.csv' data={tableInstance.current.rows}>
            <button>Export</button>
        </CSVLink>
        
        return <Table columns={columns} data={data} ref={tableInstance} />
    }

    const Table =  React.forwardRef(({columns, data}, ref) => {
        const instance = useTable({columns, data});
        React.useImperativeHandle(ref, () => instance);
    })

我有一个对我的表实例的引用,但在页面加载时,由于对表实例的引用为空,CSVLink 失败。我正在使用反应 csv。如何在父组件中拥有我的 CSV 链接并使用我的表实例中的最新行填充它。

标签: reactjsreact-table

解决方案


推荐阅读