前言
React 作为前端组件化的主流框架，有井喷式的生态系统。比如我们经常用到的 Ant Design，Material UI 等，它们提供了很多好用的组件，能够很好的帮助我们完成项目。
今天我们要介绍的 react-ya-essential-components 基于 React 编写的常用组件库，其中包含了很多好用的组件，也是我们平时开发中必不可少的工具。
安装
首先，我们先安装 npm 包，打开终端，输入以下命令即可：
npm install react-ya-essential-components
使用方法
接下来，我们看看如何在项目中使用已安装的 react-ya-essential-components。
以 Button 为例，我们可以把以下代码添加到 React 组件中：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- --------------------------------
-------- ----- -
------ -
-----
--------------- ---------------
------
--
-
------ ------- ----可以看到我们引入了 Button 组件，并在 render() 中使用了它。现在打开我们的应用，就可以看到一个默认的 Button 组件了。
组件列表
- Button
- Input
- Select
- Checkbox
- Radio
- Switch
- Alert
- Modal
- Tooltip
- Tag
- Progress
- Loading
- Avatar
- Badge
- Card
- List
接下来我们重点讲解几个常用组件，其余组件的用法和这些类似，读者可以自行查看官方文档。
Button
-- -------------------- ---- -------
------ - ------ - ---- --------------------------------
-------- ----- -
------ -
-----
--------------- ---------------
------- ---------------------- ---------------
------- ------------------ ---------------
------- -------------------- ---------------
------- ---------------- ---------------
------- ----------------- ---------------
------- --------------- ---------------
------- ------------- ---------------
------- --------------------- ---------------
------- ----------- ---------------
------
--
-Input
-- -------------------- ---- -------
------ - ----- - ---- --------------------------------
-------- ----- -
------ -
-----
------ ------------------ ------ --
------------- ------------------- ------ --
--------------- --------------------- ------ --
--------------- ---------------------- --
------
--
-Select
-- -------------------- ---- -------
------ - ------ - ---- --------------------------------
----- - ------ - - -------
-------- ------------------- -
--------------------- -----------
-
-------- ----- -
------ -
-----
------- ------------------- -------- ------ --- -- ------------------------
------- --------------------------
------- --------------------------
------- ---------------- ---------
--------
---------
------- ----------------------------------
---------
------- --------------- -------- ------ ------ -- ------------------- ------- --------------------- ------- ------------------------
------- ------------------------
------- ------------------------
------- ------------------------
------- ------------------------
------- ------------------------
------- ------------------------
---------
------
--
-Checkbox
-- -------------------- ---- -------
------ - -------- - ---- --------------------------------
-------- ----------- -
-------------------- - ----------------------
-
-------- ----- -
------ -
-----
--------- ---------------------------------------
--------- ---------------------- ---------
-------- --------
-----------
--------------- -------------------------
--------- ------------------------------
--------- ----------------------------
--------- --------------------------------
-----------------
------
--
-Radio
-- -------------------- ---- -------
------ - ----- - ---- --------------------------------
-------- ----------- -
------------------ ----------------------------
-
-------- ----- -
------ -
-----
------ ---------------------------------
------ ---------------------- ---------
-------- -----
--------
------------ ------------------- ---------------------
------ ---------------------------
------ -------------------------
------ -----------------------------
--------------
------
--
-Switch
-- -------------------- ---- -------
------ - ------ - ---- --------------------------------
-------- ----------------- -
------------------- -- -------------
-
-------- ----- -
------ -
-----
------- -------------- ------------------- --
------- ---------------------- --
------
--
-Modal
-- -------------------- ---- -------
------ - ------ ------ - ---- --------------------------------
----- --- ------- --------------- -
----- - -
-------- ------
--
--------- - -- -- -
---------------
-------- -----
---
--
-------- - - -- -
---------------
---------------
-------- ------
---
--
------------ - - -- -
---------------
---------------
-------- ------
---
--
-------- -
------ -
-----
------- -------------- -------------------------
---- -----
---------
------
------------ ------
----------------------------
--------------------
----------------------------
-
------- ---------------
--------
------
--
-
-总结
在本篇文章中，我们介绍了 react-ya-essential-components 的安装方法和组件列表，重点讲解了几个常用组件的使用方法，并提供了示例代码。这些组件在我们日常开发中经常会用到，掌握它们的使用方法，将有助于我们开发更高质量的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fe781e8991b448dd8c3