背景
前端开发中经常需要用到一些工具库，如数据可视化、动画效果、表单验证等等。这些工具库可以大大提高开发效率，减少代码量。而 npm 是一个非常流行的前端依赖包管理工具，我们可以通过 npm 找到大量的前端工具库。本文介绍的 npm 包 @mh-cbon/roster 就是其中之一。
@mh-cbon/roster 简介
@mh-cbon/roster 是一个基于 React 的 UI 组件库。它提供了一些常用的 UI 控件，如按钮、输入框、列表等等，并且这些组件都支持自定义样式和事件处理。另外，@mh-cbon/roster 还支持国际化，方便开发者根据需求切换不同的语言。
安装 @mh-cbon/roster
使用 npm 可以很方便地安装 @mh-cbon/roster，只需在命令行中执行：
npm install @mh-cbon/roster --save
安装完成后，即可在项目中引入 @mh-cbon/roster：
import { Button } from '@mh-cbon/roster'使用 @mh-cbon/roster
接下来我们来看一下如何使用 @mh-cbon/roster 来创建一个简单的 UI 界面。假设我们需要一个包含列表和搜索框的页面，列表中每个元素包含一个编号和一个名称。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- ----- - ---- -----------------
----- ------ ------- --------------- -
------------------ -
------------
---------- - -
----------- --- -- ----
------ - -- ----
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
-
-
-
------------------ - --- -- -
---------------
----------- --------------
--
-
-------- -
----- - ----------- ----- - - ----------
-- ----
----- ------------- - ----------------- --
--------- -- ----------------------------- -- -
-
-- ----
----- -------- - ---------------------- --
---- --------------
--------- -----------
------
-
------ -
-----
------ ------------------ ---------------------------------- --
----------
------
-
-
-在上面的代码中，我们首先通过 import 引入了 Button 和 Input 两个组件，然后在 render 方法中，我们创建了一个搜索框和一个列表，并将它们显示在页面上。在搜索框中输入文本后，我们通过过滤数据的方式来显示符合条件的列表数据。
示例代码
完整的示例代码可以在 GitHub 上找到。如果你想要了解更多关于 @mh-cbon/roster 的信息，可以查看官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e2446dd