React中如何跨组件访问BookingTable组件内的renderTableData函数

你在BookingTable组件内部声明的renderTableData属于组件闭包内的私有变量，React 没有提供直接跨组件访问这类私有变量的能力，你需要根据组件间的层级关系选择对应实现方式：

方案1：调用方为当前组件的父组件，通过 ref 暴露方法 #

这是官方提供的子组件向父组件暴露内部实例/方法的标准方案，仅适用于父子组件通信场景，不要滥用。

1. 改造BookingTable组件，用forwardRef接收外部传入的ref，通过useImperativeHandle指定要暴露的方法：

import { forwardRef, useImperativeHandle } from 'react';

const BookingTable = forwardRef((props, ref) => {
  const renderTableData = (startId) => {
    let id = startId;
    // 原有表格渲染逻辑
  }

  // 暴露方法给父组件的ref
  useImperativeHandle(ref, () => ({
    renderTableData
  }), [renderTableData]);

  return (
    {/* 原有组件模板 */}
    <div>表格区域</div>
  )
})

export default BookingTable;

2. 在父组件中创建ref绑定到子组件，即可调用暴露的方法：

import { useRef } from 'react';
import BookingTable from './BookingTable';

function ParentPage() {
  const tableRef = useRef(null);

  const triggerTableRender = () => {
    // 调用子组件暴露的方法
    tableRef.current?.renderTableData(1);
  }

  return (
    <div>
      <button onClick={triggerTableRender}>刷新表格</button>
      <BookingTable ref={tableRef} />
    </div>
  )
}

方案2：非父子关系组件，抽离公共逻辑 #

如果两个组件没有直接的父子层级关系，不要跨多层传递ref，优先按逻辑归属拆分代码：

• 如果renderTableData是不依赖组件内部状态的纯逻辑函数，直接把函数抽离到独立的公共工具文件中，所有需要使用的组件直接导入即可，这是耦合度最低的实现方式：

// /utils/table.js
export const renderTableData = (startId) => {
  let id = startId;
  // 纯数据处理逻辑
  return id
}

• 如果renderTableData强依赖BookingTable的内部状态，就把相关状态和处理函数提升到两个组件的公共父组件中管理，再通过props分别下发给需要调用函数、需要渲染表格的两个子组件，符合React单向数据流的设计原则。

注意：不要尝试在组件内部直接导出该函数，组件每次渲染都会重新创建函数实例，直接导出会拿到错误的闭包上下文，引发状态不一致、内存泄漏等问题。

内容的提问来源于stack exchange，提问作者Max Andersson