如何从父Pure component调用子Page组件中的函数？

需要从组件树层级更高的父组件中调用Page组件内部定义的函数。

界面示意图 #

实际组件结构 #

给你几种实用的实现思路（以React框架为例）：

• Ref转发调用
  这是最直接的方式，通过Ref获取子组件实例来调用内部函数：

  1. 改造Page组件，暴露内部方法：

  import { forwardRef, useImperativeHandle } from 'react';
  
  const Page = forwardRef((props, ref) => {
    // 定义要被父组件调用的内部函数
    const internalFunc = () => {
      // 这里写你的业务逻辑
      console.log("Page组件内部函数执行了");
    };
  
    // 把函数暴露给父组件的Ref
    useImperativeHandle(ref, () => ({
      internalFunc
    }));
  
    return <div>Page组件内容</div>;
  });
  
  export default Page;
  

  2. 在父组件中获取Ref并调用：

  import { useRef } from 'react';
  import Page from './Page';
  
  const Parent = () => {
    const pageRef = useRef(null);
  
    const callPageFunc = () => {
      // 调用子组件内部函数，加?.避免空指针
      pageRef.current?.internalFunc();
    };
  
    return (
      <div>
        <button onClick={callPageFunc}>调用Page内部函数</button>
        <Page ref={pageRef} />
      </div>
    );
  };
  
  export default Parent;
  

• 状态触发式调用
  通过父组件传递状态，子组件监听状态变化自动执行内部函数：

  1. 父组件传递触发状态：

  import { useState } from 'react';
  import Page from './Page';
  
  const Parent = () => {
    const [trigger, setTrigger] = useState(false);
  
    const callPageFunc = () => {
      // 修改状态触发子组件函数
      setTrigger(true);
    };
  
    return (
      <div>
        <button onClick={callPageFunc}>调用Page内部函数</button>
        <Page trigger={trigger} resetTrigger={() => setTrigger(false)} />
      </div>
    );
  };
  

  2. 子组件监听状态并执行：

  import { useEffect } from 'react';
  
  const Page = ({ trigger, resetTrigger }) => {
    const internalFunc = () => {
      console.log("Page组件内部函数执行了");
      // 执行完重置状态，避免重复触发
      resetTrigger();
    };
  
    useEffect(() => {
      if (trigger) {
        internalFunc();
      }
    }, [trigger]);
  
    return <div>Page组件内容</div>;
  };
  
  export default Page;
  

• Context全局调用
  如果组件层级极深，Ref或props传递太繁琐，用Context封装方法：

  1. 创建Context容器：

  import { createContext, useContext, useState } from 'react';
  
  const PageFuncContext = createContext(null);
  
  export const PageFuncProvider = ({ children }) => {
    const [pageFunc, setPageFunc] = useState(null);
  
    // 注册子组件的内部函数
    const registerFunc = (func) => setPageFunc(func);
    // 提供给父组件调用的方法
    const callFunc = () => pageFunc?.();
  
    return (
      <PageFuncContext.Provider value={{ registerFunc, callFunc }}>
        {children}
      </PageFuncContext.Provider>
    );
  };
  
  // 自定义Hook简化调用
  export const usePageFunc = () => useContext(PageFuncContext);
  

  2. Page组件注册函数：

  import { useEffect } from 'react';
  import { usePageFunc } from './PageFuncContext';
  
  const Page = () => {
    const { registerFunc } = usePageFunc();
    const internalFunc = () => {
      console.log("Page组件内部函数执行了");
    };
  
    // 组件挂载时注册函数，卸载时清空
    useEffect(() => {
      registerFunc(internalFunc);
      return () => registerFunc(null);
    }, []);
  
    return <div>Page组件内容</div>;
  };
  
  export default Page;
  

  3. 任意父组件调用：

  import { usePageFunc } from './PageFuncContext';
  
  const Parent = () => {
    const { callFunc } = usePageFunc();
  
    return (
      <div>
        <button onClick={callFunc}>调用Page内部函数</button>
      </div>
    );
  };
  
  export default Parent;
  

内容的提问来源于stack exchange，提问作者José Guilherme