React 是当前最流行的前端框架之一，可以非常方便地开发出高效的单页应用(SPA)。其中，对于数据的呈现与交互处理是至关重要的，而表格则是其中重要的一种形式。本文就介绍 React 中如何创建出具有优美样式效果和交互功能的表格，并提供示例代码。
1.准备工作
在开始编写代码之前，我们需要明确自己的需求和实现方案，包括表格数据、数据结构传递、表格样式和交互行为等。这里我们假设我们需要创建一张学生信息表格，可以实现对学生信息的增加、删除和修改操作，同时具有分页和排序功能。
在这里，我们选择使用 Material UI 组件库，它提供了众多表格相关组件以及一些基础表格的样式，可以使开发过程更加快捷和高效。首先，我们需要安装 Material UI 命令行工具，并生成一个带有基础依赖的 React 项目，以便快速引入 Material UI 组件库。
$ npm install -g create-react-app $ create-react-app my-project $ cd my-project $ npm install @material-ui/core @material-ui/icons
以上命令行操作完成后，我们可以在项目中看到我们需要使用的 Material UI 依赖已经引入了进来，接下来就可以开始编写代码了。
2.表格代码实现
静态表格
首先，我们来看如何创建出静态的表格，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ---------- ---------- --------- --------- - ---- --------------------
----- ------------ - -
- --- -- ----- ----- ---- --- ------- --- --
- --- -- ----- ----- ---- --- ------- --- --
- --- -- ----- ----- ---- --- ------- --- --
--
----- ------------- - -- -- -
------ -
-------
-----------
----------
-------------------------
-------------------------
-------------------------
-------------------------
-----------
------------
-----------
--------------------------- -- -
--------- -----------------
-----------------------------------
-------------------------------------
------------------------------------
---------------------------------------
-----------
---
------------
--------
--
--
------ ------- --------------这里，我们首先引入了 Material UI 中的一些基本表格组件，包括 Table、TableHead、TableBody、TableRow 和 TableCell。然后，定义了一个包含学生信息的数据数组 studentsData，并在组件中使用了该数据进行表格的渲染，只需要对数据进行遍历即可实现数据渲染。
动态表格
接下来，我们来实现动态表格，即实现增加、删除和修改学生信息的功能。这里我们需要使用 React 中的状态钩子——useState，并定义一些函数实现表格的增、删、改操作。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ---------- - ---- --------------------
------ - ------- ---- - ---- ---------------------
----- ------------- - -- -- -
----- -------------- ---------------- - ----------
- --- -- ----- ----- ---- --- ------- --- --
- --- -- ----- ----- ---- --- ------- --- --
- --- -- ----- ----- ---- --- ------- --- --
---
----- ------------ -------------- - ----------------
----- --------- ----------- - ----------
--- ---
----- ---
---- ---
------- ---
---
----- ---------- ------------ - ---------------
-- ------
----- --------------- - ------- -- -
-----------------------
----- ---------- - -
--- ------------------- - --
----- -------------
---- ------------
------- ---------------
--
--------------------------------- -------------
------------ --- --- ----- --- ---- --- ------- -- ---
--
-- ------
----- ----------------- - ---- -- -
--------------------------------------------- -- ---------- --- -----
--
-- ------
----- ------------------- - --------- -- -
--------------------
---------------------
--
-- ------
----- ------------------- - -- -- -
---------------------
------------------
--
-- ------
----- --------------- - -- -- -
----- --------------- - -------------------------- --
---------- --- ----------- - -------- - -------
--
---------------------------------
---------------------
------------------
--
-- ----
----- ----------------- - -- -- -
---------------------
------------------
--
-- ------
----- -------------------- - ------- -- -
----- - ----- ----- - - -------------
------------- ------------ ------- ----- ---
--
-- --------
----- ------------------- - ------- -- -
----- - ----- ----- - - -------------
------------ ----------- ------- ----- ---
--
------ -
-------
-----------
----------
-------------------------
-------------------------
-------------------------
-------------------------
-------------------------
-----------
------------
-----------
--------------------------- -- -
--------- -----------------
-----------------------------------
----------- -- -------- -- ----------- --- ---------- - -
--
-----------
------
-----------
-----------
---------------------
-------------------------------
--
------------
-----------
------
-------------
----------
--------------------
-------------------------------
--
------------
-----------
------
-----------
-------------
-----------------------
-------------------------------
--
------------
-----------
----------- -----------------------------------------
----------- -------------------------------------------
------------
---
- - -
--
-------------------------------------
------------------------------------
---------------------------------------
-----------
----------- ----------- -- ------------------------------
----- --
-------------
----------- ----------- -- -------------------------------
------- --
-------------
------------
---
--
-----------
---
----------
-----------
------
-----------
---------
------------------
------------------------------
--
------------
-----------
------
-----------
-----------
--------------------
------------------------------
--
------------
-----------
------
-------------
----------
-------------------
------------------------------
--
------------
-----------
------
-----------
-------------
----------------------
------------------------------
--
------------
-----------
----------- -----------------------------------------
------------
-----------
------------
--------
--
--
------ ------- --------------以上代码中，我们首先定义了一个 studentsData 状态变量，包含了学生信息的数组。然后，我们定义了一组状态变量，用于存储当前组件的状态，包括编辑模式下的表单状态、新增操作状态等。接着，我们定义了一些函数，来实现表格的交互操作，包括新增、删除、编辑、保存以及取消操作。
具体来说，当用户点击新增按钮时，会触发提交表单的函数 handleAddSubmit。此函数会先确认表单中的值，然后将新的学生信息添加到 studentsData 变量中。当用户点击删除按钮时，我们可以使用内建的 filter 函数过滤出需要删除的数据项。
当用户点击修改按钮时，将进入编辑模式，此时表格中的内容将被替换为一个表单，行为和新增表单相似，但是需要对当前行的数据进行预先填充。当用户点击保存时，我们将编辑后的数据保存回原始数据中，并退出编辑模式。当用户点击取消时，则直接退出编辑模式。
3.补充内容
以上代码只是表格实现的一个基本样例，具体实现还有很多细节需要完善，例如：分页功能、排序功能、样式优化、数据结构设计等，不过本文所描述的演示即可做为参考。
4.示例代码
示例代码已经放在了 Github 上，有需要的读者可以进行下载查看：
https://github.com/hainuo/react-table-demo.git
5.总结
本文中，我们介绍了 React 中如何利用 Material UI 创建具有交互功能的表格。通过上述示例代码的说明，读者应该可以对 React 开发中的数据结构梳理、组件编写、状态钩子使用等有了更全面的认识。而对于项目实际需求，则需要读者结合各自的实际情况进行深入思考和实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6456181e968c7c53b095d542
