React-Native：从父组件调用组件内的函数

Question

Child.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 is not an object (evaluate '_this.child.testFunc')。

当我在这里尝试建议的解决方案时遇到同样的错误：Call child function from parent component in React Native。

有人可以帮我吗？

Answer 1

在我看来，这是一个糟糕的设计。如果您希望testFunc()在父组件中可用，那么您应该在父组件中定义该函数。为了在子组件中使用此功能，您可以将此功能传递给道具中的子组件。从 ParentComponent.js 你可以像这样传递这个函数<ChildComponent func = {testFunc} />在 ChildComponent.js 中，您可以像这样回调此函数&nbsp;this.props.func()

Answer 2

请试试这个。由于 javascript 语法，在调用 testFunc 时删除括号。export default class Parent extends Component {&nbsp; render() {&nbsp;&nbsp; &nbsp;return (&nbsp; &nbsp;<>&nbsp; &nbsp; &nbsp;<Child onRef = {ref => (this.child=ref)}> </Child>&nbsp; &nbsp; &nbsp;<Button onPress={this.child.testFunc}></Button>&nbsp; &nbsp;</>&nbsp; &nbsp;)&nbsp; }&nbsp;}