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

Question

我有 3 个组件。一个父组件和两个子组件 (A,B)。第一个子组件 A 有一个触发父组件功能的按钮。父组件有一个开关来显示或不显示子组件 B。如果子组件 B 应该是可见的，它就会被挂载。 从 parent 调用的函数 child A 现在执行组件 B 中的函数。

我试图通过在子组件 B 上提供一个 ref 属性来实现它。但由于它没有安装在 init this.refs 上是空的。 我如何在不安装所有可能的子组件 B（或以后的 C、D、E）的情况下实现这一点。

重要的是，子 A 中的 onClick 事件总是会触发引用的事件。

这是一个速写：

谁能给我一个提示来解决我的逻辑问题？

Answer 1

下面一行：

从 parent 调用的函数 child 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 组件也是。