如何从另一个组件触发 state 在 Reactjs

Question

你好世界我需要帮助。

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

APP的示例结构

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

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

这是我想要实现的目标以及我的想象的一个例子。 代码不起作用，但你会从代码的结构中得到这个想法。

我想从组件 3执行onClick以更改位于组件 1中的进度条 state 但中间有一个组件以及它自己的组件上的进度条。

我尝试的是将 function 通常传递给我想从（组件 3 ）触发该操作的组件中的新 function 并将该 ZC1C425268E68385D1AB5074C17A94F 传递给按钮。 但它收到错误“类型错误 this.props.* 不是函数”

先感谢您

Answer 1

您需要使 Component2 (C2) 和 Component3 (C3) 成为 Component1 的子项，并将handleProgress作为道具传递给 Component2 和 Component3 就像这里https://codesandbox.io/s/blue-lake-6mx7o?fontsize=14&hidenavigation =1&主题=深色

现在，您在 C1 中创建了一个handleProgress ，但您从未将它传递给 C2 和 C3。

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