HiUI React 中后台组件库快速上手：从安装到搞定表格、表单和主题定制-Seo优化-塔城地区网站建设公司

HiUI React 中后台组件库快速上手：从安装到搞定表格、表单和主题定制

【免费下载链接】hiuiHIUI is a solution that is adequate for the fomulation and implementation of interaction and UI design standard for front, middle and backend.项目地址: https://gitcode.com/gh_mirrors/hi/hiui

做中后台页面，表格、表单、弹窗、分页几乎每个页面都要写一遍，设计稿还经常对不齐。HiUI 是一套面向中后台系统的 React 前端组件库与设计规范，内置 70+ 开箱即用的组件和 20+ 个 hooks，装完就能渲染，不用自己写分页状态和校验逻辑。

30 秒看懂 HiUI 是干什么的

HiUI 来自真实的中后台业务场景，它要解决一件事：多个页面、多人协作时，如何保持同一套交互和视觉标准。具体有四块能力值得了解：

设计标准化：按钮状态、表格布局、表单 label 位置都遵循同一套视觉与交互规范，换人维护页面，样式不会跑偏
单组件分离设计：每个组件是独立的 npm 包，数据结构与组件本身分离，API 变化容易跟进，升级成本低
场景覆盖广：70+ 组件覆盖数据展示（表格、树、列表）、表单交互（日期选择、级联、多选）、反馈通知（弹窗、提示、通知）三大块，常见中后台场景基本够用
按需加载：只引入用到的组件，构建产物不会被无关代码撑大

安装 HiUI 并渲染第一个表格

全量安装一行命令（建议 Node 14，仓库的 volta 锁定在 14.21.3）：

npm install @hi-ui/core @hi-ui/hiui

只用到几个组件的话，按组件名单独装，名字全小写、中横线连接，比如npm install @hi-ui/table。

然后写一个最小页面——一个带列、带分页的表格：

import { Table } from '@hi-ui/hiui' const columns = [ { title: '姓名', dataKey: 'name' }, { title: '部门', dataKey: 'dept' }, ] const data = [ { key: 1, name: '张三', dept: '研发部' }, { key: 2, name: '李四', dept: '运营部' }, ] export default function App() { return ( <Table columns={columns} data={data} pagination={{ pageSize: 10 }} /> ) }

有两个细节建议提前知道：data每行要带key，缺失时组件不会替你生成，后续渲染会出各种怪问题；做列冻结时，每一列必须指定width。这两点官方文档里都专门标了红。

日常最高频的 3 个场景

业务表格：排序、列冻结、控制面板一把配好

业务表格最累的不是画格子，而是围绕表格的周边：冻结、排序、隐藏列、合计。HiUI 表格把这些都收敛成配置项，加一个standard就开启整套标准能力——表头吸顶、斑马纹、列操作菜单、控制面板：

<Table standard fixedToColumn={{ left: 'name' }} columns={columns} data={data} />

需要排序就在列配置里加sorter，需要合计、平均值就加total和avg。表格组件源码：packages/ui/table/

表单：声明式校验，提交回调直接给值

表单不需要强制接入状态管理器，直接声明式写，校验规则沿用 async-validator 的格式，提交回调同时拿到值和错误：

<Form initialValues={{ name: '' }} rules={{ name: [{ required: true, message: '请输入名称' }] }}> <Form.Item field="name" label="名称" required> <Input /> </Form.Item> <Form.Submit onClick={(values) => console.log(values)}>提交</Form.Submit> </Form>

动态行有Form.List，想整张表单由数据驱动就用SchemaForm按 schema 渲染。表单组件源码：packages/ui/form/

树形数据：点击展开才加载下一级

组织架构、地域选择这类树数据不必一次拉全。onLoadChildren在点击展开时请求下一级，返回数据里的isLeaf字段控制左侧展开按钮是否显示：

<Table columns={columns} data={topData} onLoadChildren={(row) => fetchChildren(row)} />

进阶：两个最常被问到的问题

覆盖 SCSS 变量做品牌主题

HiUI 的样式用 SCSS 编写，拆成了独立的样式包 packages/core/core-css/。做品牌定制时，在构建配置的 SCSS additionalData 里覆盖主色、基础字号这类设计变量即可，不用改源码；只想调单个组件时，用className注入样式就够了，不必 fork 组件库。

内置图标集的使用与扩展

图标库 packages/icons/ 自带 400+ 个 SVG 图标组件，按 alert、common、data、direction、edit、file 分类，通过 SvgIcon 组件引入。组件由 SVG 资源自动生成：往对应分类目录放好文件，跑一下图标生成脚本（仓库脚本auto-generate，过滤@hi-ui/icons）就能产出新的图标组件，接自定义图标库同理。