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

原文地址：https://blog.csdn.net/weixin_45121510/article/details/142927183

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！