如何在React函数式组件中向子组件传递类似this的引用？

函数式组件本身没有类组件中的this上下文，所以没法直接传递this，但可以通过以下两种方式实现你想要的需求：

1. 封装API对象传递给子组件 #

把父组件中需要暴露给子组件的方法、状态（如果需要）打包成一个对象，作为props传递给子组件，子组件就可以通过这个对象调用父组件的方法，和你想要的parentPage.updateValue()用法完全一致。

示例代码： #

父组件：

import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [value, setValue] = useState(0);
  
  const updateValue = (newValue) => {
    setValue(newValue);
  };

  // 只封装需要暴露给子组件的方法和状态
  const parentApi = {
    updateValue,
    currentValue: value
  };

  return <Child parentPage={parentApi} />;
}

子组件：

function Child({ parentPage }) {
  return (
    <button onClick={() => parentPage.updateValue(parentPage.currentValue + 1)}>
      点击增加值（当前值：{parentPage.currentValue}）
    </button>
  );
}

2. 深层组件推荐使用React Context #

当组件层级较深、多个跨级/同级组件都需要访问父组件的方法时，手动传递props会导致「props drilling」（层层传递props），这时候用React Context更高效。

示例代码： #

首先创建Context文件：

// ParentContext.js
import { createContext } from 'react';
export const ParentContext = createContext(null);

父组件（提供Context值）：

import { useState } from 'react';
import { ParentContext } from './ParentContext';
import DeepNestedChild from './DeepNestedChild';

function Parent() {
  const [value, setValue] = useState(0);
  
  const updateValue = (newValue) => {
    setValue(newValue);
  };

  const contextValue = {
    updateValue,
    currentValue: value
  };

  return (
    <ParentContext.Provider value={contextValue}>
      {/* 不管层级多深，子组件都能直接获取Context值 */}
      <DeepNestedChild />
    </ParentContext.Provider>
  );
}

深层子组件（获取Context值）：

import { useContext } from 'react';
import { ParentContext } from './ParentContext';

function DeepNestedChild() {
  const parentApi = useContext(ParentContext);
  
  // 防止未提供Context时报错
  if (!parentApi) return null;

  return (
    <button onClick={() => parentApi.updateValue(parentApi.currentValue + 1)}>
      点击增加值（当前值：{parentApi.currentValue}）
    </button>
  );
}

注意事项 #

• 只暴露子组件真正需要的方法和状态，避免不必要的耦合和重渲染
• 如果使用Context，建议给Context设置合理的默认值，或者在子组件中判断是否获取到有效Context值
• 若需要优化重渲染，可以用useCallback包裹父组件的方法，并正确设置依赖项，确保方法始终引用最新的状态

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