npm包 react-3h 使用教程-JavaScript中文网-JavaScript教程资源分享门户

1. 简介

react-3h是一款基于react框架开发的高质量UI组件库，在前端开发中可以大大提高开发效率。react-3h提供了一系列的组件，例如Button、Modal、Table等等。使用该组件库可以使你的项目美观、简洁、易用。

2. 安装

使用npm安装react-3h:

npm install react-3h --save

3. 使用示例

以Button组件为例，使用权限：

-- -------------------- ---- -------
------ ------ ----------- ---- --------
------ ------ ---- -----------

----- --- ------- --------- -
    -------- -
        -------
            ------- -------------- ----------- -- ------------ -------------- -----------
        --
    -
-

Button组件共提供了primary、danger、warning、success、default等多种类型的按钮，同时支持自定义大小、图标等属性，供大家灵活使用。

4. API

Button

属性	说明	类型	默认值
type	按钮类型	string	default
size	按钮尺寸	string	null
width	按钮宽度	number/string	null
height	按钮高度	number/string	null
icon	按钮图标	string	null
iconAlign	按钮图标对齐方式	string	left
disabled	按钮是否禁用	boolean	false
loading	按钮是否处于加载中	boolean	false
onClick	按钮点击事件	function	null

Modal

属性	说明	类型	默认值
visible	是否显示弹窗	boolean	false
width	弹窗宽度	number	string
title	弹窗标题	string	null
showClose	是否显示关闭按钮	boolean	true
maskClosable	是否允许点击遮罩层关闭	boolean	true
bodyStyle	弹窗内容样式	object	{}
onClose	弹窗关闭事件	function	null
footer	自定义底部按钮	React.Element	null
destroyOnClose	关闭弹窗时是否销毁	boolean	true
afterClose	弹窗完全关闭后的事件	function	null

Table

属性	说明	类型	默认值
columns	列表头数据	Array	[]
dataSource	表格数据	Array	[]
bordered	是否显示边框	boolean	false
striped	是否显示斑马纹	boolean	true
hover	鼠标悬停时变色	boolean	true
size	表格尺寸	string	medium
loading	进行数据加载时显示的内容	boolean/object	false
pagination	分页信息	object/boolean	false
onChange	分页、排序、筛选变化时触发的回调函数	function	null
onRowClick	行单击事件	function	null
rowSelection	行选择配置，并不会影响单击的行，与onRowClick互不影响	object/boolean	false
rowClassName	自定义行样式的回调函数	function(record)	null
expandedRowKeys	展开的行，控制当前哪一行展开	Array	[]
autoHeight	是否自动设置表格高度为100%	boolean	false
minHeight	最小高度	string/number/函数	300px/100%
maxHeight	最大高度	string/number/函数	undefined

5. 总结

通过上述的介绍，我们可以看出react-3h是一款非常优秀的UI组件库，拥有丰富的组件和API接口，适合于前端开发使用。在使用过程中，我们需要熟练掌握react-3h的全部API，实践中不断摸索出最佳实践，提高我们的技术水平。

6. 参考

react-3h官网

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005600e81e8991b448dde4f