父元素如何调用在子元素上定义的函数？ [复制]

Posted 2023-02-21

【中文标题】父元素如何调用在子元素上定义的函数？ [复制]

【英文标题】：How can a parent element invoke a function defined on a child element? [duplicate]

【发布时间】：2019-06-05 04:00:48

【问题描述】：

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

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

这被合并到 DOM 中，类似于：

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

有没有办法可以从parent-div-with-controls 调用MyComponent 中定义的方法？

我在想象这个的“反应等价物”（如果存在的话）：

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

或者，这是我永远不想在 React 中做的事情吗？

【问题讨论】：

你的意思是从父组件调用子组件方法？你为什么要这样做？

【参考方案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  />
  

【讨论】：

谢谢 - 现在我知道 refs 是干什么用的了