在 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 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录