Reactjs 应用程序如何连接到多个组件和多级组件？

我在文件

App.js

中看到了一个代码示例，它设置了

组件a

：

let connectedComponent = connect(
    mapStateToProps,
    mapDispatchToProps
)(ComponentA);


export default connectedComponent;

---

但是如果

App

也需要使用

ComponentB

该怎么办？如何设置？如果

ComponentB

需要使用

ComponentC

并且还需要设置它怎么办？

在react redux

connect

中，它只是一个生成新组件的高阶函数，具有redux状态（MapStateTops）和动作创建者（mapDispatchToProps）附加到传递给连接返回的函数的原始

组件的props对象。如果希望将更多组件连接到redux存储，则必须将它们传递到
connect
功能

请参阅React文档中的，以了解connect的工作原理

知道这一点也可能是有益的，因为
钩住了
这不是唯一的选择。您可以使用从react redux导出的
useSelector
和
useDispatch
函数在启用钩子的组件中使用redux状态和分派操作。
最清晰的解决方案是将所有组件放在单独的文件中，然后将每个组件与其对应的文件连接到redux拥有MapStateTrops和mapDispatchToProps参数。然后，您可以将组件导入到App.js并使用它们

若应用程序也需要使用ComponentB，那个该怎么设置呢？如果ComponentB需要使用ComponentC并且还需要设置它呢

如果我答对了您的问题，componentB和componentC或/和componentN将被定义为
App.js
的子组件

基本上，
connect（）
会将您的组件与redux存储链接起来，这样每当在存储中检测到更改时，就会使用
MapStateTrops
将更改通知每个连接的组件。此外，互斥组件可以通过多个
connect（）
以类似方式连接。如何在
App.js
内部设置
ComponentB
？这是一个假设，还是您知道
App.js
的内容？我假设
组件b
是在其他地方声明的？您必须使用
connect
将
ComponentB
连接到redux存储。您没有将应用程序连接到另一个组件，而是将redux应用商店连接到一个组件。要将另一个组件a添加到页面，您必须再次编写这些MapStateTrops、connect等？减速器必须展开，动作名称需要展开，等等？它不仅需要添加1行或2行代码，还需要处理另外40-50行代码？App.js本身不必连接到redux。在本例中，它只是一个包装器，它收集并显示组件a、组件B。。。然后，ComponentA拥有其自身的redux状态部分，这是其运行所需的，ComponentB拥有其自身的redux状态部分，这些部分也在MapStateTrops中定义。Redux是关于将每个组件连接到Redux，然后每个组件都可以使用connect函数传递的道具直接使用Redux状态。（如果componentA是存储属性countA的计数器，并为countB添加另一个componentA）确定，在这种情况下，最好将应用程序连接到redux，并在其mapStateToProps中定义countA和countB的映射。然后在您的组件a中，只需创建一个名为f.e.count的新参数，并将此计数从应用程序传递给组件a，您将在应用程序中使用组件a两次，第一次使用count=countA，第二次使用count=countB。