简介
prestentional-react-components 是一个 React 组件库，主要用于开发 React 组件，提供了大量样式和基本组件，开发过程中可以减少大量的样式编写，免去了样式繁琐的问题。本文将会介绍使用 presentional-react-components 的详细教程，让开发者能够快速了解并使用该组件库进行前端开发。
安装
使用 npm 进行安装：
npm install presentional-react-components --save
快速上手
presentional-react-components 已经内置了需要的样式，并提供了大量基本组件，非常适合快速开发一个 React 应用。
引入组件
presentional-react-components 提供了一个主要组件库入口，你可以在你的项目中直接 import 进来。
-- -------------------- ---- -------
------ ----- ---- --------
-- -------
------ - ------- ----- - ---- ----------------------------------
-------- ----- -
------ -
-----
------------- ------------
------ ------------------ ---- -------- --
------
--
-
------ ------- ----使用组件
当我们在应用程序中导入所需的组件之后，就可以享受它们的好处。
-- -------------------- ---- -------
------ ----- ---- --------
-- -------
------ - ------- ----- - ---- ----------------------------------
-------- ----- -
------ -
-----
------------- ------------
------ ------------------ ---- -------- --
------
--
-
------ ------- ----组件
prestentional-react-components 提供了多种组件，主要包括：Button、Input、Link、Select、Text、Textarea、Radio、Checkbox、Modal 等常用组件。
Button 组件
Button 组件用于创建一个按钮。组件集成了一个样式库，可以支持大小、样式和状态的多种变化。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ----------------------------------
-------- ---------- -
------ -
------- ----------- -- ------------ ----------
----- ---
---------
--
-
------ ------- ---------Input 组件
Input 组件用于创建一个输入框。可以设置默认值、占位符、类型、禁用等属性。也可以自定义样式、大小等属性。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ----------------------------------
-------- --------- -
------ -
------
-----------
--------------------
---------------
------------- -- ----------------------------
--
--
-
------ ------- --------Link 组件
Link 组件用于创建一个链接。可以设置链接文字、目标、禁用等属性。也可以自定义样式、大小等属性。
import React from 'react';
import { Link } from 'presentational-react-components';
function MyLink() {
return <Link href="#" disabled={false}>Click me!</Link>;
}
export default MyLink;Select 组件
Select 组件用于创建一个下拉菜单。可以设置默认选项、可选项、禁用等属性。也可以自定义样式、大小等属性。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ----------------------------------
-------- ---------- -
------ -
-------
----------
- ------ -------- ------ ------- --
- ------ --------- ------ -------- --
- ------ --------- ------ -------- --
- ------ --------- ------ -------- --
--
--------
------------- -- ----------------------------
--
--
-
------ ------- ---------Text 组件
Text 组件用于创建一个文本。可以设置文本、禁用等属性。也可以自定义样式、大小等属性。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ----------------------------------
-------- -------- -
------ -
----------- -------------
--
-
------ ------- -------Textarea 组件
Textarea 组件用于创建一个多行文本框。可以设置默认值、占位符、禁用等属性。也可以自定义样式、大小等属性。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ----------------------------------
-------- ------------ -
------ -
---------
---------------
------------------ ---- ------- ------
------------- -- ----------------------------
--
--
-
------ ------- -----------Radio 组件
Radio 组件用于创建一个单选框。组件集成了一个样式库，可以支持样式和状态的多种变化。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ----------------------------------
-------- --------- -
------ -
------
-------------
---------------
------------- -- ----------------------------
--------------
--
-
------ ------- --------Checkbox 组件
Checkbox 组件用于创建一个多选框。组件集成了一个样式库，可以支持样式和状态的多种变化。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ----------------------------------
-------- ------------ -
------ -
---------
-------------
---------------
------------- -- ----------------------------
-----------------
--
-
------ ------- -----------Modal 组件
Modal 组件用于创建一个对话框。可以设置标题、内容、按钮等元素。也可以自定义样式、大小等属性。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ----------------------------------
-------- -------------- -
----- ------- - -- -- -
----------------
--
------ -
------
------------ ------
-----------------
-----------------------
---------
- ----- ------ -------- -- -- ------------- --
- ----- ----- -------- -- -- --------- --
--
-
---
----- ----- ----- --- ----- ----------- ---------- ----- --- -- ------- ------ ---------- -- ------ -- ------ ----- -------
----
--------
--
-
------ ------- --------结论
presentional-react-components 是一个非常好的 React 组件库，特别是对于前端开发人员。它已经内置了我们想要的大量组件和样式，可以快速开发出高品质的 React 应用程序。通过本文的介绍，相信大家对 presentional-react-components 已经有了更深入的了解，能够快速上手使用该组件库进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be481e8991b448e59d2