Javascript React组件应该如何调用同质子级集合中的函数？

假设我有一个组件，其中包含将PUT请求发送到后端的功能。通常，这些请求是由与该组件直接交互的用户触发的。让我们将其称为

子项

UI的另一部分包含在父组件中呈现的这些元素的集合。让我们把这个新容器称为父容器

我希望

Parent

在

Child

组件集合旁边呈现一个公共按钮，让我的用户一次触发来自所有

Child

元素的PUT请求

---

目前，我保存每个

子元素

的引用，因为我在

父元素

中渲染它们。当用户单击在

Parent

中呈现的公共按钮时，我让

Parent

迭代每个ref，并调用触发PUT请求的每个

子

中的函数。有更好的办法吗？

是的，有更好的办法。您应该找到需要访问它的最近的共同祖先。在这种情况下，每个

子项中都有需要在
父项中访问的数据。您试图使子对象与容器断开连接，使其完全独立

相反，我建议您重新考虑应用程序的结构，以便数据以
父级
或另一个祖先的形式存在于
状态
，而该祖先只需将其作为
道具
传递给每个
子级
进行渲染。执行
PUT
请求的函数也可以选择位于祖先内部，并通过回调进行处理，或者——取决于回调需要发生什么反馈或不需要发生什么反馈——只是一个跨组件共享的实用函数或服务

编辑：这是React的核心概念之一，称为“自上而下的数据流”

对于React应用程序中更改的任何数据，都应该有一个“真实来源”。通常，状态首先添加到渲染所需的组件中。然后，如果其他组件也需要它，您可以将它提升到它们最近的共同祖先。您应该依赖自顶向下的数据流，而不是尝试在不同组件之间同步状态