【React】父组件如何调用子组件的方法

在React中，父组件可以通过ref来调用子组件的方法。以下是一个简单的示例，展示了如何在父组件中使用ref来调用子组件的方法。
子组件
首先，在子组件中定义一个方法，并使用forwardRef将其暴露给父组件。

注意下面的代码块中，localRef相关的代码其实不需要也可以实现这个功能；

import React, { forwardRef, useImperativeHandle, useRef } from 'react';const ChildComponent = forwardRef((props, ref) => {const localRef = useRef();useImperativeHandle(ref, () => ({注意：这里放子组件将被父组件调用的方法scroll: (awardName, callback) => {console.log(
`Scrolling to ${awardName}`);// 执行滚动逻辑if (callback) callback();}}));return (<div ref={localRef}>{/* 子组件内容 */}</div>);
});export default ChildComponent;

父组件
在父组件中，使用useRef创建一个ref，并将其传递给子组件。然后，可以通过这个ref调用子组件的方法。

import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';const ParentComponent = () => {const childRef = useRef();const handleScroll = () => {if (childRef.current) {childRef.current.scroll('Award Name', () => {支持回调console.log('Scroll completed');});}};return (<div><ChildComponent ref={childRef} /><button onClick={handleScroll}>Scroll to Award</button></div>);
};export default ParentComponent;

解释
子组件：使用forwardRef和useImperativeHandle将scroll方法暴露给父组件。
父组件：使用useRef创建一个ref，并将其传递给子组件。通过这个ref调用子组件的scroll方法。
这样，父组件就可以调用子组件的方法了。