React 是一种用于构建 UI 界面的 JavaScript 库。它旨在简化应用程序的开发过程，并提供一种高效、灵活的方式来创建可重复使用的 UI 组件。在本文中，我们将学习如何使用 React 实现一个简单的购物车页面。
准备工作
在开始编写代码之前，我们需要先安装 React。可以通过以下命令进行安装：
npm install --save react react-dom
然后，创建一个名为 Shopping Cart 的 React 应用程序。在控制台中输入以下命令：
npx create-react-app shopping-cart cd shopping-cart
在项目的根目录中，使用以下命令启动应用程序：
npm start
现在我们可以开始编写代码了。
创建组件
我们将使用两个 React 组件来构建购物车页面。第一个组件将是商品列表组件，它将包含所需的商品信息。第二个组件将是购物车组件，它将显示已添加到购物车中的商品列表。
商品列表组件
首先，我们需要定义一个名为 Product 的函数组件，它将接收 props 作为参数并返回一个 React 元素。该组件将渲染出一个商品卡片，其中包含商品名称、价格和添加到购物车按钮：
-- -------------------- ---- -------
-------- -------------- -
------ -
---- --------------------
--- ------------------------------------------
-- -------------------------------------------------------
-------
------------------------------
----------- -- ------------------------------
-
--- -- ----
---------
------
--
-购物车组件
现在我们需要编写一个名为 ShoppingCart 的类组件，它将呈现购物车中的所有商品。
我们需要在构造函数中初始化购物车的状态，即一个空数组，以便我们可以向购物车中添加商品。我们还将定义一个名为 addProductToCart 的方法，它将接收一个产品作为参数，并将其添加到购物车中。
在 render 方法中，我们将循环访问购物车中的每个产品，并呈现它们的名称和价格。我们还将渲染出一个名为 Checkout 的按钮，当单击该按钮时，将使购物车返回到空状态。
-- -------------------- ---- -------
----- ------------ ------- --------------- -
------------------ -
-------------
---------- - -
---------- ---
--
--------------------- - ---------------------------------
-
------------------------- -
--------------- ---------- ------------------------- -------- ---
-
-------- -
------ -
---- --------------------------
-------- -------- ---------
---------------------------- --- - - -
-- --------------------------- ---- -- ----------
- - -
---- -----------------------
----------------------------------- ------ -- -
---- --------------------- ------------
-- ---------------------------------------------
-- -----------------------------------------------------------
------
---
-------
---------------------------
----------- -- --------------- ---------- -- ---
-
--------
---------
------
--
------
--
-
-渲染页面
现在我们已经定义了两个组件，我们需要在根组件中渲染它们。在 App.js 中，我们需要导入我们的 Product 和 ShoppingCart 组件，并在 render 方法中将它们呈现出来：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ------------
------ ------------ ---- -----------------
-------- ----- -
----- -------- - -
- --- -- ----- -------- --- ------ ---- --
- --- -- ----- -------- --- ------ ----- --
- --- -- ----- -------- --- ------ ----- --
--
------ -
---- ----------------
------------ ---------
---- ---------------------
----------------------- -- -
--------
----------------
-------------------
---------------------
--------------------------- -- ---------------------------------------
--
---
------
------------- --
------
--
-这段代码首先定义了我们要呈现的商品列表，然后将 Product 组件呈现为 products 数组的每个项目，并将一个名为 addProductToCart 的函数作为属性传递。此函数将被调用以将产品添加到购物车中。
最后，我们呈现 ShoppingCart 组件，让用户能够查看在购物车中添加的所有商品。
结论
在本文中，我们使用 React 创建了一个简单的购物车页面。我们创建了两个组件：Product 组件用于显示商品列表，ShoppingCart 组件用于显示购物车中的所有商品。我们还学习了如何在 React 中使用函数组件和类组件，并如何在它们之间传递数据。我希望这篇文章对初学者有所帮助，并能启发你构建更复杂的 React 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6736d5980bc820c58256a0a4