在 React Native 自定义功能组件中访问 refs

Question

我想在父组件中调用子组件的函数。这是我的伪代码：

export const Child: React.FC<Props> = ({ onRef }) => {
  useEffect(() => {
    if (onRef) {
      onRef(this);
    }
  }, [])

  function callMe() {
    console.log('Child has been called');
  }

  return <Text>Child</Text>;
}

export const Parent: React.FC<Props> = () => {
  const childRef = useRef(null);

  function callChild() {
    childRef.current.callMe();
  }

  return <Child onRef={childRef} />;
}

我该怎么做？

Answer 1

可以使用useImperativeHandle调用子组件函数。

你可以在子组件中这样定义你的函数。

useImperativeHandle(ref, () => ({
  callMe: () => {
    console.log('Child has been called');
  }
}));

此外，你还应该将forwardRef应用于子组件：

export const Child = forwardRef(props, ref) => {
  // component logic
});

现在您可以通过在父组件中创建一个 ref 来调用此函数，如下所示：

const childRef = useRef(null);

function callChild() {
  childRef.current.callMe();
}

return <Child ref={childRef} />;