reactjs通过refs在组件之间进行通信

Question

我有3个组件。一个父组件和两个子组件（A，B）。第一个子组件A有一个触发父组件功能的按钮。父母有一个开关要么显示子组件B，要么不显示。如果子组件B可见，则它将被安装。 从父级调用的函数子A现在执行组件B中的函数。

我试图通过在子组件B上提供ref属性来实现它。但是因为它在init this.refs上没有安装的原因是空的。 如何在不安装所有可能的子组件B（或后来的C，D，E）的情况下实现此目的。

子A中的onClick事件始终触发引用的事件非常重要。

以下是快速草稿：

有人能给我一些提示来解决我的逻辑问题吗？

Answer 1

以下一行：

  

从父节点调用的函数子节点A现在执行一个函数   组件B。

是奇怪的/并且是一个带有反应的禁区：父母不能（不应该）直接调用子组件内的函数。
父母可以（应该）将道具传递给孩子，然后孩子可以发起自己的功能。

如果我理解正确，你想执行子B中的函数，以便在a）单击组件A时执行并且b）组件B已安装

您可以按如下方式实现：

• 在父级中添加状态参数，例如this.setState(childAClicked: true)，很可能位于父级内部的回调函数内，由子A调用。
• 将此参数传递给子B，例如<ChildB clickedA = {this.state.childAClicked} />
• 在子B中，添加componentDidMount()生命周期方法，检查this.props.clickedA，如果为true，则在子B内执行您的功能
• 如果您想在更新子B后也执行该功能，请在componentDidUpdate()生命周期方法中添加相同的检查

如果要根据其他参数在组件B，C，D中的某个组件内执行该功能，则还要将此参数添加到父级状态，并将其传递给其他B，C和D组件太