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

Question

你好世界我需要帮助。

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

APP示例结构

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

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

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

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

我尝试的事情是将函数正常传递给组件中的一个新函数，我想从（组件 3）触发该操作并将该函数传递给按钮。但它得到一个错误“类型错误 this.props.* is not a function”

先感谢您

Answer 1

您需要使 Component2 (C2) 和 Component3 (C3) 成为 Component1 的子级，并handleProgress作为 prop 传递给 Component2 和 Component3，如下所示https://codesandbox.io/s/blue-lake-6mx7o?fontsize=14&hidenavigation= 1&主题=深色

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

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