如何在带有 Hooks 的 React Native 中使用 refs？

Question

我正在使用 Hooks 开发 React Native 应用程序。（没有类）。当我们使用类时，我们可以像这样创建一个子组件的 ref。

<Child ref={component => this.childComponent = component} />

但是，当我们使用 Hooks 时，如何做到这一点？

我想要这样的东西。

export default function Child() {
  const foo = () => {
    //do something
  }

  return(
    //something
  )
}


export default function Parent() {
  const myFunc = () => {
    ref.foo();
  }

  return(
    <Child ref={.........} />  //This is what I want to know how to do?
  )
}

希望你明白我想说的意思。

Answer 1

为了用钩子定义引用，你需要使用useRef hook. And in order to apply ref to functional components you need to use forwardRef and useImperativeHandle hook

function Child(props, ref) {
  const foo = () => {
    //do something
  }

  useImperativeHandle(ref, () => ({
     foo
  }));

  return(
    //something
  )
}

export default React.forwardRef(Child)


export default function Parent() {
  const childRef = useRef(null)
  const myFunc = () => {
    childRef.current.foo();
  }

  return(
    <Child ref={childRef} />  
  )
}

如何在带有 Hooks 的 React Native 中使用 refs？

How to uses refs in React Native with Hooks?

javascript

ref

react-native

react-hooks