Question

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

2020-07-13

147

javascript react-native parent-child

Child.js：

export default class Child extends Component {

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

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

Parent.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.testFunc’）。

当我尝试此处建议的解决方案时，我收到相同的错误：在 React Native 中从父组件调用子函数。

有人可以帮帮我吗？

Answer 1

在我看来，这是一个糟糕的设计。如果您希望 testFunc() 在父组件中可用，那么您应该在父组件中定义该函数。

为了在子组件中使用此函数，您可以在 props 中将此函数传递给子组件。

从 ParentComponent.js，您可以像这样传递此函数

<ChildComponent func = {testFunc} />

在 ChildComponent.js 中，您可以像这样回调此函数 this.props.func()

Answer 2

请尝试此操作。由于 javascript 语法，调用 testFunc 时删除括号。

export default class Parent extends Component {

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