Question

如何在React中从父级调用子组件功能

单击按钮需要从parentComponent调用子函数needToBeCalled（）

请参考下面的代码段

class Parent {

render(){
return(
<button onClick={() => }>Click</button>
<Child />
)
}
}

class Child {
function needToBeCalled() {

}
render(){
return (

)
}
}

Answer 1

这是React中的反模式，但是您可以使用ref来做类似的事情

  class Parent {
    constructor(props) {
    super(props);
     this.myRef = React.createRef();
   }
  render(){
     return(
      <button onClick={this.myRef.current}>Click</button>
      <Child myRef={this.myRef}/>
    )
   }
  }

  class Child {
    componentDidMount(){
      function needToBeCalled() {

    }
    this.props.myRef.current = needToBeCalled
  }
  render(){
   return (

    )
 }
}

Answer 2

您不能，但是有另一种方法可以成功实现您想做的事情。

替代方法是在Child组件中使用一个名为componentDidUpdate（）的反应生命周期，并获取已更改的道具。

例如

class Parent extends React.PureComponent {
    state={
        trigger:false
    }
    render(){
        return(
        <button onClick={() => {this.setState(prevState=>({trigger:!prevState.trigger}))}}>Click</button>
        <Child trigger={this.state.trigger} />
        )
    }
}

class Child extends React.PureComponent {
    componentDidUpdate(prevProps, prevState) {
        if (this.props.trigger && prevProps.trigger !== this.props.trigger) { // <---- When the props trigger turns true, we are good to go
            this.needToBeCalled() // <---- You do trigger your function right now kid
        }
    }
    function needToBeCalled() {

    }
    render(){
        return (

        )
    }
}

如何从父中调用子组件函数

2 个答案: