当前位置：首页 > React

react如何调用子组件的函数

2026-01-26 02:48:15React

调用子组件函数的常见方法

使用 ref 直接调用 通过 React.createRef() 或 useRef 创建引用，附加到子组件上。子组件需用 forwardRef 暴露内部方法，类组件则直接通过 ref.current 访问实例方法。

react如何调用子组件的函数

// 父组件
const Parent = () => {
  const childRef = useRef();
  const handleClick = () => childRef.current.childMethod();
  return <Child ref={childRef} />;
};

// 子组件（函数组件）
const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    childMethod: () => console.log('方法被调用')
  }));
  return <div>子组件</div>;
});

通过 Props 传递回调 父组件将函数作为 prop 传递给子组件，子组件在适当时机调用该函数实现通信。

react如何调用子组件的函数

// 父组件
const Parent = () => {
  const handleChildCall = () => console.log('子组件触发');
  return <Child onAction={handleChildCall} />;
};

// 子组件
const Child = ({ onAction }) => {
  return <button onClick={onAction}>触发父组件</button>;
};

使用 Context 跨层级通信 通过 React Context 在任意层级组件间共享方法和状态，适用于深层嵌套场景。

const ChildContext = createContext();
const Parent = () => {
  const [action, setAction] = useState();
  return (
    <ChildContext.Provider value={{ triggerAction: () => setAction('触发') }}>
      <Child />
    </ChildContext.Provider>
  );
};

事件总线或状态管理 对于复杂场景，可通过 Redux、MobX 或自定义事件总线实现组件间通信，解耦调用关系。