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

在React中，父组件可以通过ref来调用子组件的方法。以下是一个简单的示例，展示了如安在父组件中利用ref来调用子组件的方法。
子组件
首先，在子组件中定义一个方法，并利用forwardRef将其袒露给父组件。
注意下面的代码块中，localRef相关的代码其实不需要也可以实现这个功能；

1. import React, { forwardRef, useImperativeHandle, useRef } from 'react';
3. const ChildComponent = forwardRef((props, ref) => {
4.   const localRef = useRef();
6.   useImperativeHandle(ref, () => ({
7.    注意：这里放子组件将被父组件调用的方法
8.     scroll: (awardName, callback) => {
9.       console.log(
10. `Scrolling to ${awardName}`);
11.       // 执行滚动逻辑
12.       if (callback) callback();
13.     }
14.    
15.   }));
17.   return (
18.     <div ref={localRef}>
19.       {/* 子组件内容 */}
20.     </div>
21.   );
22. });
24. export default ChildComponent;

复制代码

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

1. import React, { useRef } from 'react';
2. import ChildComponent from './ChildComponent';
4. const ParentComponent = () => {
5.   const childRef = useRef();
7.   const handleScroll = () => {
8.     if (childRef.current) {
9.       childRef.current.scroll('Award Name', () => {
10.       支持回调
11.         console.log('Scroll completed');
12.       });
13.     }
14.   };
16.   return (
17.     <div>
18.       <ChildComponent ref={childRef} />
19.       <button onClick={handleScroll}>Scroll to Award</button>
20.     </div>
21.   );
22. };
24. export default ParentComponent;

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。