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

Posted 2023-02-18

【中文标题】如何在 Reactjs 中从另一个组件触发状态

【英文标题】：How to trigger a state from another component In Reactjs

【发布时间】：2021-03-30 18:56:36

【问题描述】：

你好，我需要帮助。

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

APP结构示例

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

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

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

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

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

提前谢谢你

【问题讨论】：

听起来您走在正确的轨道上（将回调函数向下传递到组件树） - 您能否更新您的示例以包含您遇到“类型错误 this.props. * 不是函数”？这听起来像是正确的方法，但在传递或调用函数时某处出现错误。

是的，我已经说过这不是原始代码，现在分享起来很复杂，我不允许分享，但我做了一个简化版本只是想触发进度条。在原始代码中出现错误

【参考方案1】：

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

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

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

【讨论】：

谢谢，但我没有t get your answer, I assume they are children of Component 1 if you looked into the App.js? Isnt 那你的意思是什么？

我看到你的解决方案很有意义，但在我的情况下，如果我不能从 App.js 中删除它们怎么办

然后你需要将状态提升到App并将进度存储在App中。在 React 中，通信是上下进行的，而不是组件之间的水平通信（这是可能的，但它很难看，而且有代码味道）

我同意你的观点，但我现在没有选择该项目已经存在，需要时间来改变很多事情，你能告诉我丑陋的方式吗？我会很感激那谢谢

您要求修复不起作用的代码，我做到了。你问的是一个不同的问题。请创建一个新问题，Stack Overflow 的集体思想将为您提供帮助:)