如何在React函数组件中调用父组件的函数？

函数组件不存在this指向，不需要通过this访问传入的属性，直接从组件的props参数中获取即可，不同场景的具体用法如下：

父组件传参写法 #

父组件如果是类组件，你原来的写法可以直接沿用；如果父组件是函数组件，直接传入定义好的函数即可：

// 函数组件父组件示例
const Parent = () => {
  const functionName = () => {
    console.log('父组件函数被触发');
  };
  return <MyChild func={functionName} />;
};

子组件不同场景的调用方式 #

1. 组件内部直接调用 #

函数组件的第一个入参就是props对象，直接解构或者通过props.属性名访问即可：

// 子组件写法
const MyChild = ({ func }) => {
  const handleClick = () => {
    func?.(); // 加可选链可以避免未传该属性时报错
  };
  return <button onClick={handleClick}>触发父组件方法</button>;
};

2. 在useEffect中调用 #

直接把传入的func加入useEffect的依赖数组即可：

const MyChild = ({ func }) => {
  useEffect(() => {
    // 组件挂载时调用一次父组件方法
    func?.();
  }, [func]); // 必须把func加入依赖数组，避免闭包问题
  
  return <div>子组件内容</div>;
};

3. 在useCallback中调用 #

同样将func加入useCallback的依赖数组即可：

const MyChild = ({ func }) => {
  const memoizedHandle = useCallback(() => {
    func?.();
  }, [func]); // func变化时会自动更新缓存的回调函数

  return <button onClick={memoizedHandle}>触发父组件方法</button>;
};

注意：如果父组件传入的函数没有用useCallback包裹，每次父组件重新渲染都会生成新的函数实例，会导致子组件中依赖func的useEffect、useCallback重复执行。如果需要做性能优化，可以在父组件定义函数时用useCallback包裹，稳定函数引用：

// 父组件优化写法
const functionName = useCallback(() => {
  console.log('父组件方法');
}, [/* 该函数的内部依赖项 */]);

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