Как использовать ссылки в React Native с крючками? - PullRequest
Новая
       35

Как использовать ссылки в React Native с крючками?

0 голосов
/ 27 апреля 2020

Я разрабатываю приложение React Native с помощью Hooks. (Нет классов). Когда мы используем классы, мы можем создать ссылку на дочерний компонент, подобный этому. 

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

Но как это сделать, когда мы используем крючки?

Я хочу что-то вроде этого. 

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?
  )
}

Надеюсь, вы понимаете, что я пытаюсь сказать.

1 Ответ

1 голос
/ 27 апреля 2020

Для определения ссылок с крючками необходимо использовать 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} />  
  )
}
...