如何从子组件向父组件获取react-table实例？求指导

As a React beginner, I wrote the code below to pass a react-table instance to the parent component via an onInit callback. I'm not sure if this approach is appropriate or if it counts as a bad programming pattern. I'd love to get your opinions!

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> {/* Use the table instance here */} </div> 
    </div>
  ); 
};

Short Answer #

This approach isn't a strict "anti-pattern" since it works, but it goes against React's recommended data flow principles and comes with some maintainability risks. Let's break this down:

Why This Approach Isn't Ideal #

• Breaks one-way data flow: React is designed for data to flow down from parent to child via props, with child components communicating changes up via callbacks. Pushing a child's internal instance up to the parent creates tight coupling—if react-table's instance API changes, or you modify the Table component's logic, your parent component could break unexpectedly.
• Risk of stale instances: The empty dependency array in your useEffect means onInit only runs once when the Table mounts. If the table instance is recreated later (e.g., when data or columns change), the parent's table state won't update, leaving you with a stale instance.
• Harder debugging: When issues pop up with the table instance in the parent, you'll have to trace logic across both components instead of following a clear, one-way data path.

Better Alternatives #

1. Move useTable to the Parent Component

If the parent needs to interact with the table instance, handle the core table logic directly in the parent and pass only rendering props to the child. This is the most React-idiomatic approach:

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

// Child component only handles rendering
const Table = ({ getTableProps, getTableBodyProps, headerGroups, rows, prepareRow }) => { 
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => (
                <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </table>
  ); 
}; 

const TableParent = () => { 
  const tableInstance = useTable({ data: [...], columns: [...] });
  
  // Use the instance directly here
  const handleToggleAll = () => tableInstance.toggleAllRowsSelected();

  return (
    <div> 
      <Table {...tableInstance} /> 
      <div>
        <button onClick={handleToggleAll}>Toggle All Rows</button>
      </div> 
    </div>
  ); 
};

2. Use React Context for Encapsulated Logic

If you need to keep useTable inside the child component (e.g., to reuse default configurations), use a Context to share the instance safely:

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

const TableContext = React.createContext(null);

const Table = ({ data, columns }) => { 
  const tableInstance = useTable({ data, columns }); 

  return (
    <TableContext.Provider value={tableInstance}>
      <table>...</table>
    </TableContext.Provider>
  ); 
}; 

const TableParent = () => { 
  const tableInstance = React.useContext(TableContext);

  return (
    <div> 
      <Table data={[...]} columns={[...]} /> 
      <div>
        {/* Handle null case while the table mounts */}
        {tableInstance && (
          <button onClick={() => tableInstance.toggleAllRowsSelected()}>
            Toggle All Rows
          </button>
        )}
      </div> 
    </div>
  ); 
};

Final Takeaway #

Your original code works for simple cases, but it'll become harder to maintain as your app grows. Prioritize moving useTable to the parent if possible—it's the cleanest, most maintainable approach aligned with React's design. If you need encapsulation, Context is a far more reliable alternative than callback-based instance passing.

内容的提问来源于stack exchange，提问作者Rannie Aguilar Peralta