React-Native: вызов функции в компоненте из родительского компонента в

Question

Ребенок. js:

export default class Child extends Component {

  testFunc = () => {
   console.log("test")
  }

  componentDidMount() {
    this.props.onRef(this)
 }

Родитель. js:

export default class Parent extends Component {

 render() { 
   return (
   <>
     <Child onRef = {ref => (this.child=ref)}> </Child>
     <Button onPress={this.child.testFunc()}></Button>
   </>
   )
 }
}

Мне было интересно, как мне вызвать функцию, которая находится в дочернем компоненте из родительского компонент в React Native? Я пробовал приведенный выше код и получаю сообщение об ошибке «TypeError undefined не является объектом (оценка '_this.child.testFun c').

Я получаю ту же ошибку, когда пробовал предлагаемое решение здесь: Вызов дочерней функции из родительского компонента в React Native .

Может кто-нибудь мне помочь?

Answer 1

Пожалуйста, попробуйте это. Удалите скобки при вызове testFun c из-за синтаксиса javascript.

export default class Parent extends Component {

  render() { 
   return (
   <>
     <Child onRef = {ref => (this.child=ref)}> </Child>
     <Button onPress={this.child.testFunc}></Button>
   </>
   )
  }
 }

Answer 2

Мне кажется, это плохой дизайн. Если вы хотите, чтобы testFunc() был доступен в родительском компоненте, вы должны определить эту функцию в родительском компоненте.

Чтобы использовать эту функцию в дочернем компоненте, вы можете передать эту функцию дочернему элементу в реквизитах .

From ParentComponent. js вы можете передать эту функцию следующим образом

<ChildComponent func = {testFunc} />

В ChildComponent. js вы можете выполнить обратный вызов этой функции следующим образом this.props.func()