父元素如何调用子元素上定义的函数？[副本]

Question

如果我有一个基于类的组件：

class MyComponent extends React.Component {
    state = {...}
    constructor(props) {...}
    functionIWantToCall() {...}
    render() {...}
}

<div id="parent-div-with-controls">
  .... (some control elements) ....
  <MyComponent {...props}/>
</div>

const myComponent = new MyComponent()
myComponent.functionIWantToCall()

Answer 1

您可以使用ref与MyComponent中的实例建立“连接”：

在父组件中,执行以下操作：

class Parent extends React.Component {

  innerComponentInstance = React.createRef()

  // sample place where to "contact" the child component
  componentDidUpdate() {
    this.innerComponentInstance.functionIWantToCall()
  }

  render() {
    <MyComponent ref={ this.innerComponentInstance } />
  }

}