Question

我正在重建和替换旧的电子商务系统产品页面中的部分，而这些部分是用React编写的。与其重写整个事情，不如逐个组件地编写它，然后在项目中，我将以一种更传统的方式将其连接起来。但是目前它只是一部分。

我目前正在尝试弄清如何处理两个组件（ProductList和购物车）之间的数据。这两个组件位于产品页面上的整个不同位置。如果我要在ProductList中按“添加到购物车”，我希望购物车能够对该事件做出反应，并按“购物车”中的“清空购物车”以触发ProductList中的更改。

组件不会是兄弟姐妹。

应用程序的基本结构：

HTML：

<!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>

Javascript组件：

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')
);

既然不是共同祖先的孩子，那么我将如何以一种好的方式来处理组件通信呢？

Answer 1

一种方法是使用Redux库https://redux.js.org/basics/usage-with-react 它可以为购物车配备减速器，并且List和Cart组件应该用将与cart商店连接的容器组件包装。

此外，您可以使用在React 16.3版本中添加的上下文API https://medium.freecodecamp.org/an-introduction-to-react-16-3-context-api-basics-53382372dc35

对于这个问题，我说用redux解决方案更为可取。

在两个完全独立的React组件之间处理数据

1 个答案: