【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方法。
这样，父组件就可以调用子组件的方法了。