简介
base-component-react 是一个基于 React 的前端组件库，提供了多种常用组件以及支持自定义组件的扩展能力。该库非常适合用于快速构建中小型项目，也可以作为构建更大型项目的基础库。
安装
使用 npm 进行安装：
npm install --save base-component-react
使用
我们先来了解一下 base-component-react 的几个基础概念：
- 组件： 一个具有单独功能和结构的
React组件。 - 组合： 将多个组件组合起来形成更复杂的组件。
- 布局： 将组合好的组件按照一定的规则进行排列，形成一个完整的页面或区域。
引入组件
在使用之前，需要先引入组件：
import { Button, Modal } from 'base-component-react';使用组件
Button
import { Button } from 'base-component-react';
function SimpleButton() {
return <Button onClick={() => console.log('按钮被点击了')}>点击我！</Button>;
}支持的参数：
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
onClick |
() => void |
点击事件回调 | |
type |
string |
'primary' |
按钮类型： 'primary', 'secondary', 'danger', 'link' |
size |
string |
'medium' |
按钮尺寸： 'small', 'medium', 'large' |
prefixIcon |
elementType |
前缀图标 | |
suffixIcon |
elementType |
后缀图标 | |
disabled |
boolean |
false |
是否禁用 |
ripple |
boolean |
true |
是否显示波纹 |
className |
string |
自定义类名 | |
style |
object |
自定义样式 |
Modal
-- -------------------- ---- -------
------ - ----- - ---- -----------------------
-------- ------------- -
----- --------- ----------- - ----------------
------ -
--
------- ----------- -- -------------------------------
------
-----------------
------------ -- ------------------
--------------
--------
--
------- ----------- -- ------------------------------
------- -------------- ----------- -- -------------------
--
---------
---
-
-
------------------
--------
---
--
-支持的参数和事件：
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
visible |
boolean |
false |
控制弹窗的显示和隐藏 |
title |
string |
弹窗的标题 | |
className |
string |
自定义类名 | |
width |
string / number |
520 |
弹窗的宽度 |
destroyOnClose |
boolean |
false |
关闭弹窗时是否销毁 |
mask |
boolean |
true |
是否显示遮罩层 |
keyboard |
boolean |
true |
是否支持按下 Esc 键关闭弹窗 |
closable |
boolean |
true |
是否显示右上角的关闭按钮 |
cancelText |
string |
取消 |
取消按钮的文字 |
okText |
string |
确认 |
确认按钮的文字 |
onOk |
() => void |
点击确认按钮后的回调函数 | |
onCancel |
() => void |
点击取消按钮后的回调函数 | |
afterClose |
() => void |
弹窗关闭后的回调函数 |
自定义组件
除了自带的基础组件，base-component-react 还支持自定义组件，在大型项目中具有很大的灵活性。
-- -------------------- ---- -------
------ - ------------- - ---- -----------------------
----- --------------- ------- ------------- -
-- -- ----- ----
------ --------- - -
-- ----
--------- ----------------------------
--
-- ---
------ ------------ - -
--------- ---
--
-------- -
-- -- ---------- -------
----- - -------- - - -----------
------ ----------------------
-
-
-------- -------------------- -
------ ---------------- -------------------- ---
-结语
以上就是 base-component-react 的基础使用和自定义组件的教程，希望能够帮助大家快速掌握它的使用方式。如果您有任何更好的建议或疑问，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b44c6eb7e50355dbe58