在 React Hooks 中，父组件可以通过引用子组件的实例来调用子组件的方法。
一、使用 ref 获取子组件实例
- 在父组件中定义一个 ref 对象，用于引用子组件实例。
- 在子组件的渲染函数中，将子组件的实例赋值给 ref 对象。
- 在父组件中，通过 ref 对象调用子组件的方法。
下面是一个示例代码：
父组件：
import React, {
useRef } from'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const childRef = useRef(null);
const handleChildMethod = () => {
if (childRef.current) {
childRef.current.childMethod();
}
};
return (
<div>
<ChildComponent ref={
childRef} />
<button onClick={
handleChildMethod}>调用子组件方法</button>
</div>
);
}
export default ParentComponent;
子组件：
import React from'react';
function ChildComponent() {
const childMethod = () => {
console.log('子组件方法被调用');
};
return (
<div>
<h2>子组件</h2>
</div>
);
}
export default ChildComponent;
在上述示例中，父组件通过 useRef 创建了一个 ref 对象 childRef，并将其传递给子组件。在子组件中，通过 useImperativeHandle 钩子函数将子组件的实例暴露给父组件，并将其赋值给 ref 对象。
在父组件中，通过 childRef.current.childMethod() 调用子组件的方法。
二、使用 forwardRef 传递子组件实例
- 在子组件中定义一个函数组件，并使用
forwardRef将子组件的实例传递给父组件。 - 在父组件中，通过 ref 对象调用子组件的方法。
下面是一个示例代码：
父组件：
import React, {
useRef } from'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const childRef = useRef(null);
const handleChildMethod = () => {
if (childRef.current) {
childRef.current.childMethod();
}
};
return (
<div>
<ChildComponent ref={
childRef} />
<button onClick={
handleChildMethod}>调用子组件方法</button>
</div>
);
}
export default ParentComponent;
子组件：
import React, {
forwardRef } from'react';
function ChildComponent(props, ref) {
const childMethod = () => {
console.log('子组件方法被调用');
};
return (
<div>
<h2>子组件</h2>
</div>
);
}
export default forwardRef(ChildComponent);
在上述示例中，子组件使用 forwardRef 将子组件的实例传递给父组件。在父组件中，通过 ref 对象调用子组件的方法。
通过以上两种方式，父组件可以调用子组件的方法，实现组件之间的通信和交互。
