介绍
horunge 是一个基于 React 的 UI 组件库，其中包括多种常用 UI 组件，如按钮、文本框、下拉框等。使用 horunge 可以方便地快速搭建美观实用的前端界面。
安装
使用 npm 可以方便地安装 horunge：
npm install horunge --save
使用
以按钮组件为例，使用 horunge 的方法如下：
-- -------------------- ---- -------
------ - ------ - ---- ----------
-------- ----- -
------ -
-----
------------- -----------
------
--
-这里先用 import 导入 horunge 中的 Button 组件，再在组件内部使用即可。可以看到，horunge 的组件使用方法和 React 原生组件几乎相同。
组件列表
horunge 包含的组件如下：
- Button：按钮组件
- Input：文本框组件
- Select：下拉框组件
- Radio：单选框组件
- Checkbox：复选框组件
- DatePicker：日期选择器组件
- Modal：模态框组件
- Tooltip：提示框组件
- Pagination：分页组件
示例
下面来看一个简单的例子，展示 horunge 中 Button、Input、Select 三个组件的使用：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- ------ ------ - ---- ----------
-------- ----- -
----- ------------ -------------- - -------------
----- ------------- --------------- - -------------
----- ----------------- - --- -- -
------------------------------
--
----- ------------------ - ------- -- -
----------------------
--
------ -
-----
------ ----------------- ------------------ ---------------------------- --
------- ----------------- ------------------- ------------------------------
------- ----------------------------
------- ----------------------------
------- ----------------------------
---------
------- ----------- -- -------------------------------------------------------
---
---------
------
--
-可以看到，在这个例子中，我们使用了 useState Hook 来管理 Input 和 Select 的值，以便在点击 Button 后能够获取它们的值。onChange 和 onClick 均是 React 原生事件，与普通的 HTML 事件相同。
总结
horunge 是一个功能强大、易用的 UI 组件库，可以快速搭建漂亮实用的前端界面。使用 npm 可以方便地安装 horunge，使用方法与 React 原生组件几乎相同。希望本文对大家在前端开发中使用 horunge 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c4581e8991b448e5c83