使用 React 在父组件中公开子组件的状态和方法

Question

我知道这样做不是一个好的模式，但你会明白我为什么要这样做。

我有一个HTable，它使用第三方库（react-table）

const HTable = <T extends object>({ columns, data, tableInstance}: Props<T>) {
   const instance: TableInstance<T> = useTable<T> (
   // Parameters
   )
   React.useImperativeHandle(tableInstance, () => instance);
}

现在，我想从父级控制列的可见性。我做到了：

const Parent = () => {
      const [tableInstance, setTableInstance] = React.useState<TableInstance<SaleItem>>();

      <Table data={data} columns={columns} tableInstance={(instance) => setTableInstance(instance)}

       return tableInstance.columns.map((column) => {
           <Toggle active={column.isVisible} onClick={() =>column.toggleHiden()}
       }
}

该列隐藏得很好，但状态没有更新，切换也没有，我不明白为什么。你能帮我理解吗？

编辑：

添加沙盒。

https://codesandbox.io/s/react-table-imperative-ref-forked-dilx3?file=/src/App.js

请注意，我不能使用 React.forwardRef，因为我使用 typescript，如果我使用 forwardRef，React.forwardRef 不允许这样的泛型类型

interface TableProps<T extends object> {
    data: T[],
    columns: Column<T>[],
    tableInstance?:  React.RefObject<TableInstance<T>>,
}

Answer 1

您的问题是 react-tables useTable() 钩子总是返回与 instance 包装器相同的对象（引用永远不会改变）。因此，您的父母正在将 tableInstance 重新设置为同一个对象 - 这不会触发更新。实际上，大多数包含的值也被记住了。要获得它的响应式获取 headerGroups 属性。

const {
  headerGroups,
  ...otherProperties,
} = instance;

React.useImperativeHandle(
  tableInstance,
  () => ({ ...properties }), // select properties individually
  [headerGroups, ...properties],
);