如何从 Reactjs 中的另一个组件触发状态

Question

您好，我需要帮助。

我有一个进度条组件和一个在其中使用进度条的组件。 还有另一个应该触发进度条的组件。

APP示例结构

• Home.js
  • 有进度条的组件（组件1）
    • 介于两者之间的组件（组件 2）
      • 我想从中触发进度条的组件（组件 3）
• 进度条组件（ProgressBar）

https://codesandbox.io/s/optimistic-stallman-rjxi9?file=/src/App.js

这是我想要实现的目标以及我的想象方式的示例。代码不工作，但你会从代码的结构中得到想法。

我想从 Component 3 执行 onClick 来更改位于 Component 1 的进度条状态但是中间有一个Component，还有自己Component上的进度条。

我尝试的是正常地将函数传递给组件中的一个新函数，我想从 (Component 3) 触发该操作并将该函数传递给按钮。但它收到错误“类型错误 this.props。* 不是函数”

提前致谢

Answer 1

您需要使 Component2 (C2) 和 Component3 (C3) 成为 Component1 的子项，并像这里一样将 handleProgress 作为 prop 传递给 Component2 和 Component3 https://codesandbox.io/s/blue-lake-6mx7o?fontsize=14&hidenavigation=1&theme=dark

目前，您在 C1 中创建了一个函数 handleProgress，但您从未将其传递给 C2 和 C3。

要将其传递给 C2 和 C3，您需要将它们从 App 组件中删除，然后将它们移动到 C1。