javascript - 如何在 Reactjs 中从另一个组件触发状态

Question

Hello World 我需要帮助。
我有一个进度条组件和一个在其中使用进度条的组件。
另一个组件应该触发进度条。
APP的示例结构

主页.js

具有进度条的组件(组件 1)

介于两者之间的组件(组件 2)

我想触发进度条的组件(组件 3)

进度条组件(ProgressBar)

https://codesandbox.io/s/optimistic-stallman-rjxi9?file=/src/App.js
这是我想要实现的目标以及我的想象的一个例子。代码不起作用，但你会从代码的结构中得到这个想法。
我要表演 onClick来自 组件 3 更改位于 中的进度条状态组件 1 但是中间有一个组件以及它自己的组件上的进度条。
我尝试的事情是将函数通常传递给组件中的一个新函数，我想从( 组件 3 )触发该操作并将该函数传递给按钮。但它收到错误“类型错误 this.props.* 不是函数”
先感谢您

Answer 1

您需要使 Component2 (C2) 和 Component3 (C3) 成为 Component1 的子级，并通过 handleProgress作为 Component2 和 Component3 的 Prop ，就像这里 https://codesandbox.io/s/blue-lake-6mx7o?fontsize=14&hidenavigation=1&theme=dark
现在，您创建了一个函数 handleProgress在 C1 中，但您从未将其传递给 C2 和 C3。
要将其传递给 C2 和 C3，您需要将它们从 App 中删除组件，并将它们移动到 C1。