React Native 父组件调用子组件方法:使用 ref 和 useImperativeHandle
在 React Native 中,父组件可以通过 ref 属性获取子组件的引用,并调用子组件的方法。
首先,在子组件中定义需要调用的方法:
function MyChildComponent(props, ref) {
const myMethod = () => {
// 执行一些操作
};
useImperativeHandle(ref, () => ({
myMethod,
}));
return (
// 子组件的 JSX
);
}
export default forwardRef(MyChildComponent);
在子组件中使用了 useImperativeHandle hook,这个 hook 可以让子组件把需要暴露给父组件的方法通过 ref 传递出去。在这个例子中,子组件暴露了一个 myMethod 方法。
然后,在父组件中获取子组件的引用,并调用子组件的方法:
function MyParentComponent() {
const childRef = useRef();
const handleClick = () => {
childRef.current.myMethod();
};
return (
<View>
<MyChildComponent ref={childRef} />
<Button title='调用子组件方法' onPress={handleClick} />
</View>
);
}
在父组件中,使用 useRef hook 创建一个 ref,并将其传递给子组件的 ref 属性。然后,在父组件中定义一个 handleClick 方法,在这个方法中通过 childRef.current 获取到子组件的引用,并调用子组件的 myMethod 方法。
需要注意的是,使用 ref 获取子组件的引用,只有在子组件被渲染后才能获取到。因此,在父组件中调用子组件的方法,应该在子组件被渲染后再调用。
原文地址: https://www.cveoy.top/t/topic/kUVr 著作权归作者所有。请勿转载和采集!