Question

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

<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钩子。为了将ref应用于功能组件，您需要使用forwardRef和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} />  
  )
}

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

1 个答案: