1. 什么是 react-todo-list
react-todo-list 是一个基于 React 技术栈的 todo list 组件，它可以方便的帮助我们构建一个完整的待办事项列表界面。它具有以下特点：
- 使用了 React 官方推荐的 hooks 技术，代码更加简洁易懂
- 支持本地存储，可以保存我们创建的所有待办事项
- 支持删除和完成待办事项的功能
- 提供了一些基本的美化样式，可以根据自己需求进行二次定制
2. 如何使用 react-todo-list
2.1 安装
要在你的项目中使用 react-todo-list，需要先安装它：
npm i react-todo-list
2.2 使用
安装完成之后，就可以在你的项目中使用 react-todo-list 了。我们可以通过引入 TodoList 组件并传入必要的 props 来使用它。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------------
-------- ----- -
------ -
---- ----------------
--------- --
------
--
-
------ ------- ----你也可以传入一些可选的 props 来按照自己需要进行二次定制：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------------
-------- ----- -
------ -
---- ----------------
---------
--------------
--------------------
----------------------
--
------
--
-
------ ------- ----此时，你就拥有了一个基本的 todo list 列表界面，并且支持本地存储。接下来，我们来看一下如何对它进行一些基本的定制。
2.3 定制
2.3.1 改变标题
如果你希望将标题改为自己想要的文字，可以在引入 TodoList 组件时传入 title prop：
<TodoList title="我的待办事项" />
2.3.2 改变占位符
默认情况下，输入框的占位符是 "What do you need to do?"，如果你希望将占位符改为自己想要的文字，可以在引入 TodoList 组件时传入 placeholder prop：
<TodoList placeholder="添加新的待办事项" />
2.3.3 改变存储 key
默认情况下，react-todo-list 会使用 todo-list 作为本地存储的 key，如果你希望将存储 key 改为自己想要的 key，可以在引入 TodoList 组件时传入 storageKey prop：
<TodoList storageKey="my-todo-list" />
这将会使得 react-todo-list 使用 my-todo-list 作为本地存储的 key。
2.3.4 修改样式
react-todo-list 提供了一些基本的样式，但是可能不够适合你的需求。你可以通过传递 style prop 来修改样式，也可以修改 TodoList.module.css 文件中的样式。
如果你想要自定义某一个组件的样式，你可以通过给它的 className 进行修改：
<TodoListItem className="custom-todo-list-item" />
在 TodoList.module.css 文件中添加一个与 custom-todo-list-item 对应的样式即可。例如：
.custom-todo-list-item {
background-color: #f0f0f0;
font-weight: bold;
}3. 示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------------
------ ------------
-------- ----- -
------ -
---- ----------------
---------
--------------
----------------------
-------------------------
--------
------ --------
------- -- ------
--
--
------
--
-
------ ------- ----4. 总结
react-todo-list 是一个非常实用的 todo list 组件，可以帮助我们快速构建完整的待办事项列表界面。通过本文的介绍，你已经能够学习到如何使用 react-todo-list，同时也了解到如何对它进行一些基本的定制。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005543d81e8991b448d190b