ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【React】父组件如何调用子组件的方法 [打印本页]

作者: 吴旭华 时间: 2024-10-15 04:05
标题: 【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方法。
这样，父组件就可以调用子组件的方法了。

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

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)