时间戳

首页 > 解决方案 > 从子组件到父组件访问 react-table 实例的最佳方法 [需要您的意见]

reactjs - 从子组件到父组件访问 react-table 实例的最佳方法 [需要您的意见]

问题描述

目前我正在这样做：

import * as React from "react";
import { useTable } from "react-table";

const Table = ({ onInit }) => {
  const table = useTable({ data: [...], columns: [...] });

  React.useEffect(() => {
    onInit(table);
  }, []);

  return <table>...</table>
};

const TableParent = () => {
  const [table, setTable] = React.useState();

  return <div>
    <Table onInit={table => setTable(table)} />
    <div>
      {/* Used table instance here */}
    </div>
  </div>
};

但不确定这是好的还是不好的模式。
我是 React 初学者。
拜托，我想听听你的意见。
谢谢！

标签： reactjsreact-table

解决方案

我这样做，效果很好

假设：父组件是 App，子组件是 Table

从父组件：您可以将回调传递给表组件

在表组件中：您使用插件点调用相同的回调instance作为参数传递hooks.useInstance

我让你很容易，检查控制台日志：

https://codesandbox.io/s/get-react-table-instance-in-parent-component-rx66s?file=/src/App.js

推荐阅读