Как вызвать метод внутри компонента Child из Parent в React Native? По сути, я хочу сделать то, что componentDidMount() делает для компонентов класса в функциональном компоненте.

Я получаю сообщение об ошибке «Компонентам функций нельзя давать ссылки», и я могу захотеть использовать React.ForwardRef().

Пс. idk, как бы я переформатировал ребенка-наблюдателя, простите за плохое форматирование

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.load = React.createRef();

  componentDidMount() {
     this.load.current.loadAudio();
  }

 render(){
      latestEP.query = ref => ref.orderBy("id", "desc").limit(1);

     return(
      {latestEP.docs.map(doc => (
       <DashboardItem key={doc.id} doc={doc} ref={this.load} />
       ))}
  )
 }
}

const DashboardItem = observer(({ doc }) => {
 function loadAudio(){
   return console.log("works")}

 return (// stuff that requires loadAudio to run first)
})
0
Ahmed Ali 29 Ноя 2019 в 22:17

2 ответа

Вы можете добиться этого с помощью хука useImperativeHandle. Пожалуйста, проверьте это: https://reactjs.org/docs/hooks-reference.html#useimperativehandle

Оберните DashItem в forwardRef и реализуйте ловушку useImperativeHandle, как показано ниже:

const DashItem = React.forwardRef(({doc}, ref) => {
  useImperativeHandle(ref, () => ({
    loadAudio: () => {
      return console.log("works");
    }
  }));
...
1
proton 30 Ноя 2019 в 02:06

Ошибка «Компонентам функций не могут быть даны ссылки» должна быть очевидна: вам нужно изменить DashItem на компонент класса, а не на функциональный компонент.

0
Joseph Sible-Reinstate Monica 29 Ноя 2019 в 22:20
Я упускал некоторую дополнительную информацию, мой плохой, отредактированный вопрос для ясности
 – 
Ahmed Ali
29 Ноя 2019 в 22:28