Блог

Главная - Вопросы по программированию - Лучший способ доступа к экземпляру react-table из дочернего компонента в родительский [нужны ваши мнения]

Лучший способ доступа к экземпляру react-table из дочернего компонента в родительский [нужны ваши мнения]

#reactjs #react-table

#reactjs #react-table

Вопрос:

В настоящее время я делаю это:

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

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

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

  return <table&&t;...</table&&t;
};

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

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

но не уверен, нормально ли это или это плохой шаблон.
Я новичок в React.
Пожалуйста, я хочу услышать ваше мнение.
Спасибо!

Ответ №1:

Я делаю это вот так, и это хорошо работает

Давайте предположим: родительский компонент — это приложение, а дочерний компонент — таблица

Из родительского компонента: вы можете передать обратный вызов компоненту table

В компоненте table: вы вызываете тот же обратный вызов, передавая его instance в качестве параметра, используя hooks.useInstance точку плагина

Я упростил вам задачу, проверьте журнал консоли:

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

Комментарии:

1. Я пробовал это, мне удалось получить экземпляр, но всякий раз, когда в дочернем компоненте (таблице) происходит onChan&e, он снова обновляется, чего я пытаюсь добиться, так это присвоить pa&eSize состоянию в родительском компоненте, я надеюсь, вы поняли мою точку зрения, и если вы можете ответить мне спасибо.

2. Хорошо, этого не ожидается, мне может понадобиться больше деталей вашего кода. Также ознакомьтесь с этим часто задаваемым вопросом здесь, когда ваш компонент table сбрасывается или обновляется: &ithub.com/tannerlinsley/react-table/blob /…