首页react18 父组件调用子组件方法

react18 父组件调用子组件方法

时间: 2025-02-20 19:36:22 浏览: 31

为了实现React 18中父组件调用子组件的方法，可以采用以下几种方式：利用`useImperativeHandle`与`forwardRef`配合使父组件能够访问并触发子组件内部定义的方法 ```jsx // 子组件定义并且选择性地暴露某些方法供外部（如父级）调用 import React, { forwardRef, useImperativeHandle } from 'react'; const ChildComponent = forwardRef((props, ref) => { // 定义想要公开给父组件调用的方法 useImperativeHandle(ref, () => ({ func: () => console.log('This is a method exposed by child component.') })); return <div>这是一个子组件</div>; }); ``` 在父组件内创建引用并通过属性传递给子组件，进而允许其控制或交互 ```jsx // 父组件设置ref并将之作为prop传递给子组件 import React, { useRef } from 'react'; import ChildComponent from './ChildComponent'; function ParentComponent() { const childRef = useRef(null); const handleClick = () => { if (childRef && childRef.current) { childRef.current.func(); } }; return ( <> <button onClick={handleClick}>点击以执行子组件功能</button> {/* 将ref赋值给子组件 */} <ChildComponent ref={childRef} /> </> ); } ``` 这种方式使得父组件可以通过特定事件或其他逻辑条件来决定何时以及如何调用子组件的功能。

阅读全文