简介
itemment 是一个基于 React 的 Web 组件，它提供了基本的列表展示、分页以及评论功能。
在使用 itemment 之前，我们需要先了解 React、npm、Webpack 的相关知识，对前端的基础知识掌握较好。
安装与使用
在使用 itemment 之前，我们需要先安装它。使用下面的命令即可：
npm install itemment
创建评论列表
接着，我们需要在我们的 React 项目中引用 itemment 组件。我们可以在代码中使用下面的方法来创建基本的评论列表：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -----------
----- --- ------- --------------- -
-------- -
------ -
---------
-----------
- ----- ----- -------- -------- --
- ----- ----- -------- --------- --
--
--
--
-
-这里，我们将两条评论传递给了 itemment 组件，并将它们展示出来。
使用分页功能
我们也可以在列表中启用分页功能。为了更好地了解 itemment 分页功能的使用，我们也需要对其进行一些配置，下面是一个使用分页功能的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -----------
----- --- ------- --------------- -
-------- -
------ -
---------
------------
-----------
- ----- ----- -------- -------- --
- ----- ----- -------- --------- --
- ----- ----- -------- --------- --
- ----- ----- -------- --------- --
- ----- ----- -------- --------- --
--
--
--
-
-这里，我们将 pageSize 属性设置为 2，以便将每页的评论数量设置为 2。
此外，我们还需要添加数字翻页组件。我们可以使用自定义进入页函数来实现翻页功能。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -----------
----- --- ------- --------------- -
-------- -
------ -
---------
------------
-----------
- ----- ----- -------- -------- --
- ----- ----- -------- --------- --
- ----- ----- -------- --------- --
- ----- ----- -------- --------- --
- ----- ----- -------- --------- --
--
-------------------
-----------
-----------
---------
- -- -
-----
------- ----------- -- -------------------------
------- ----------- -- ------------------- - ----------------
------- ----------- -- ------------------- - ----------------
------- ----------- -- -----------------------------------
------
-- ------------ - ------------
-------
------
--
--
--
-
-这里我们使用了 renderPagination 属性来渲染自定义的数字翻页组件，并绑定了 goToPage 方法，用于更新页码。
自定义评论框
我们还可以使用 itemment 来创建自定义评论框，为了更好地了解如何创建自定义评论框，下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -----------
----- --- ------- --------------- -
----- - -
-------- ---
--
------------ - ----- -- -
--------------- -------- ------------------ ---
--
------------ - -- -- -
----- - ------- - - -----------
-- --------
--
-------- -
----- - ------- - - -----------
------ -
---------
------------
-----------
- ----- ----- -------- -------- --
- ----- ----- -------- --------- --
- ----- ----- -------- --------- --
- ----- ----- -------- --------- --
- ----- ----- -------- --------- --
--
--------------------- ------------- ------------- ------- -- -- -
----- ------------------------
------
-----------
---------------
-----------------------
------------------
--
------- -------------------------
-------
--
--
--
-
-这里我们通过设置 renderCommentForm 属性来实现自定义的评论框，并将 comment、handleChange、handleSubmit 作为属性传递给了它。
结论
在本文中，我们学习了如何使用 itemment 创建基本的评论列表、启用分页功能以及自定义评论框。itemment 是一个十分实用的 React 组件，无论是对于初学者还是对于有经验的开发者，都能像我们上面演示的这样使用它来搭建 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559b181e8991b448d740a