Javascript 在两个完全独立的组件之间处理数据
我正在重建旧的电子商务系统产品页面，并将其替换为用React编写的部分。 我不是重写整件事，而是一个组件一个组件地做，稍后在项目中，我将以更传统的方式连接它。 但现在只是一部分一部分 我目前正试图弄清楚如何在两个组件（ProductList和Cart）之间处理数据。这两个组件位于产品页面上完全不同的位置。 如果在ProductList中按Add to cart，我希望cart能够对该事件做出反应，并在cart中按Empty cart以触发ProductList中的更改 这些组件不会是同级的 应用程序的基本结构： HTML：Javascript 在两个完全独立的组件之间处理数据,javascript,reactjs,Javascript,Reactjs,我正在重建旧的电子商务系统产品页面，并将其替换为用React编写的部分。 我不是重写整件事，而是一个组件一个组件地做，稍后在项目中，我将以更传统的方式连接它。 但现在只是一部分一部分 我目前正试图弄清楚如何在两个组件（ProductList和Cart）之间处理数据。这两个组件位于产品页面上完全不同的位置。 如果在ProductList中按Add to cart，我希望cart能够对该事件做出反应，并在cart中按Empty cart以触发ProductList中的更改 这些组件不会是同级的 应用
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div>
<!-- Lots of other stuff, PHP etc... -->
<div id="list"></div>
<!-- Lots of other stuff, PHP etc... -->
</div>
<!-- Lots of other stuff, PHP etc... -->
<div id="cart"></div>
<script src="static/js/app.js"></script>
</body>
</html>
试验
import React from "react";
import ReactDOM from "react-dom";
import List from "./components/List";
import Cart from "./components/Cart";
ReactDOM.render(
<List />,
document.getElementById('list')
);
ReactDOM.render(
<Cart />,
document.getElementById('cart')
);
从“React”导入React；
从“react dom”导入react dom；
从“/components/List”导入列表；
从“/components/Cart”导入购物车；
ReactDOM.render(
,
document.getElementById（'list'）
);
ReactDOM.render(
,
document.getElementById（'cart'）
);
由于两者都不是共同祖先的后代，我该如何以良好的方式处理组件通信呢？一种方法是使用Redux库， 它可能有一个用于购物车商店的减速器， 列表和购物车组件应该用与购物车商店连接的容器组件包装 此外，您还可以使用react 16.3版本中添加的上下文API
我想说，对于这个问题，使用redux的解决方案更可取。当两个同级组件需要交互时，一种常见的技术是。例如，您可以创建一个
Appcartlist