React中非父子组件函数传递与多组件方法触发方案咨询

场景1：点击Pfl组件按钮触发自身及Sdc、Checkscan组件的函数 #

实现方案：父组件作为中间层，通过Ref调用子组件方法 #

由于三个组件是兄弟关系，直接通过父组件（App）统一管理子组件的方法引用，再将触发其他组件的逻辑传递给Pfl即可。

1. 改造子组件，暴露内部方法
   使用forwardRef和useImperativeHandle将各组件的点击方法暴露给父组件：

   // Pfl组件示例
   import { forwardRef, useImperativeHandle } from 'react';
   
   const Pfl = forwardRef((props, ref) => {
     const handlePflClick = () => {
       console.log('执行Pfl自身逻辑');
       // 这里写Pfl的业务代码
     };
   
     // 向父组件暴露触发方法
     useImperativeHandle(ref, () => ({
       trigger: handlePflClick
     }));
   
     return (
       <button onClick={() => {
         handlePflClick();
         // 调用父组件传递的触发其他组件的方法
         props.onTriggerOthers?.();
       }}>Pfl按钮</button>
     );
   });
   
   // Sdc组件示例
   const Sdc = forwardRef((props, ref) => {
     const handleSdcClick = () => {
       console.log('执行Sdc逻辑');
       // 这里写Sdc的业务代码
     };
   
     useImperativeHandle(ref, () => ({
       trigger: handleSdcClick
     }));
   
     return <button onClick={handleSdcClick}>Sdc按钮</button>;
   });
   
   // Checkscan组件与Sdc实现一致，替换对应逻辑即可
   

2. 在App组件中管理Ref并传递触发逻辑

   import { useRef } from 'react';
   
   function App() {
     const sdcRef = useRef(null);
     const checkscanRef = useRef(null);
   
     // 定义触发Sdc和Checkscan的逻辑
     const triggerOthers = () => {
       sdcRef.current?.trigger();
       checkscanRef.current?.trigger();
     };
   
     return (
       <div className="App">
         <Header/>
         <Pfl onTriggerOthers={triggerOthers} />
         <Sdc ref={sdcRef}/>
         <Checkscan ref={checkscanRef}/>
       </div>
     );
   }
   

场景2：点击Apicontainer的Start按钮触发三个组件的函数 #

实现方案：容器组件通过Ref统一调用子组件方法 #

这个场景更简单，容器组件作为父节点，直接通过Ref获取三个子组件的暴露方法，点击Start时批量调用即可。

1. 子组件复用场景1的改造逻辑
   保持三个组件的forwardRef和useImperativeHandle实现不变。

2. 改造Apicontainer组件

   import { useRef } from 'react';
   import Button from '@mui/material/Button';
   
   export default function Apicontainer() {
     const pflRef = useRef(null);
     const sdcRef = useRef(null);
     const checkscanRef = useRef(null);
   
     const handleStart = () => {
       // 依次触发三个组件的方法
       pflRef.current?.trigger();
       sdcRef.current?.trigger();
       checkscanRef.current?.trigger();
     };
   
     return (
       <React.Fragment>
         <Pfl ref={pflRef} />
         <Sdc ref={sdcRef} />
         <Checkscan ref={checkscanRef} />
         <Button variant="contained" onClick={handleStart}>Start</Button>
       </React.Fragment>
     );
   }
   

补充说明 #

如果后续组件层级变深、联动逻辑更复杂，可以考虑React Context或Redux等状态管理工具。但当前场景下，Ref调用子组件方法是最轻量化、直接的方案，无需额外引入复杂度。

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