常见 FAQ

[Flcwl]

使用 HiUI 过程中，如果有任何问题、建议，或者出现 bug 都可以给 HiUI 提交 issue！我们会及时处理并反馈！！

[Flcwl]

Q1. hi-ui里面，菜单和路由是一个概念吗? 能从服务器加载菜单，然后根据path查找路由，再打开相应的组件吗？

1. 一个菜单可以绑定一个路由，点击跳到对应路由的页面组件。
2. 路由就是一个 routerConfig 配置，前端约定好路由 path 和页面组件的关系后，可以走后端请求加载菜单配置

另外，最终还是需要根据业务需求的不同，在请求菜单数据后动态生成 routeconfig 传入给 Theme。

注意：因为菜单数据是异步加载的。需要等数据返回了，再渲染路由。否则在页面刷新时，菜单路由还未加载是空的，会找不到还没加载的而导致 404。

[Flcwl]

Q2. 使用 Form 组件为什么 FormItem 包裹了一个表单控件，比如 Input 组件，再给 Input 设置 value 就失效了呢？

首先，使用 Form 组件的前提就是表单控件 value 设置将无效，这是设计上的取舍。

Form 组件的作用就是批量管理表单相关的数据，意味着对数据的统一处理，局部给某个表单控制受控 value，会和 Form 管理的数据冲突，意味着一个数据被两个来源管理，这将可能导致整个 form 组件管理的值可能无法是最新的，违背了数据一致性。

另外，关于如何更新表单数据的问题，我们通过调用 API 来进行了统一，具体参考 form 文档：

1. initialValues: 设置表单初始值

2. onValuesChange(changedValues: object, allValues: object) => void: 监听表单值改变

3. setFieldsValue(field: Object)：设置表单的值

4. getFieldsValue( fields: Object ) => Object：获取表单的值

基于此，保证了表单控件功能的基本可用性。同时也能充分发挥 Form 表单检验以及排版等充分优势。

[Flcwl]

Q3. 对于某个组件，比如表格的表头可以控制字号大小吗？

首先，要明确 HiUI 是一套中后台解决方案，是有专门的设计规范的，存在的一个重要原因就是保证各系统的体验上的一致性。
我们不太建议自己去调整样式改一些外观的东西，如果真的要改，自行覆盖样式（不了解的参考如下示例）即可。

scss 局部覆盖 HiUI 样式

思路：通过 className 进行样式赋值，在对覆盖的样式使用另一层样式进行包裹，避免样式污染（影响到其它完全不需要覆盖的组件样式）。

例如，对于 Q3 提到的这个需求，表格的表头自定义字号大小。我们可以这么做：

1. 创建 scss 文件，编写覆盖样式代码

// src/views/custom-page/index.scss

.custom-page {
  .custom-page__table {  // 避免全局污染，使用自定义的一层 `.custom-page__table` 进行包裹

    .hi-table__header__title {  // HiUI 组件中的样式类名
      font-size: 16px; // 需要覆盖的属性
    }

  }
}

2. 最终，在 js 文件中引入该样式文件即可

// src/views/custom-page/index.js

import './index.scss' // 引入刚刚编写的样式文件

function CustomPage (props) {
  return (
    <div className="custom-page">
      <Table {...props} className="custom-page__table"></Table>
    </div>
  )
}

[Flcwl]

Q4. 尝试修改 package.json 以安装新版本的 HiUI 或者回退到之前版本的 HiUI，发现 npm install 后，node_modules 查看具体的版本信息还是之前的老版本？

这个问题属于 npm 工具使用上的问题。

1. 如何正确的更新 npm 包具体可以参考：https://docs.npmjs.com/cli/v7/commands/npm-update
2. 实在不行，可以将 package-lock 和 node_modules 中对应包给删除，然后执行 npm install

[Flcwl]

Q5. 如何使用 npm 安装依赖包到至指定版本的方法？

比如，将 @hi-ui/hiui 更新到最新版本。

npm update @hi-ui/hiui@next

https://blog.csdn.net/yanzi1225627/article/details/80220408

[Flcwl]

Q6. 当一个组件更新了新 feature 或者修复了 bug，可以直接升级吗？ 升级新版本对其它组件有没有影响吗？

首先，我们默认遵循 semver 规范， 也就是说我们默认只维护大版本的最新版本，只要不是大版本升级，比如 1.0.0 升到 3.0.0，那么就可以放心升级，对其他组件不会有任何影响。

[Flcwl]

Q7. 对于表单控件组件，为什么值改了，更新状态之后，没有生效呢？

这是一个 React 新手可能会常遇到的问题，我们的状态更新需要确保是 更新值引用 而不是只更新内部属性。

正确的做法如下：

const nextFormData = {
  ...this.state.forms,
  provinceId: value[0],
  cityId: 0,
  districtId: 0,
  areaId: 0,
}

this.setState({ forms: nextFormData })

[Flcwl]

Q8. 刚刚 HiUI 发了新版本，为什么无法安装到新版本呢，总是报错如下：

首先要明确 HiUI 是开源的，使用的是 npm 官方源进行发布管理的。
这个问题可能的大概率原因是：你的镜像源不是官方 npm 源，可以使用 npm config list 查看镜像源确认 registry 字段值，具体切换细则参考：

# 使用官方镜像
npm config set registry https://registry.npmjs.org/

• Ref: https://www.jianshu.com/p/f311a3a155ff

如果还是无法安装，可以查看HiUI 发布的版本 https://www.npmjs.com/package/@hi-ui/hiui，看版本是否存在或者单词拼写错误了

[Flcwl]

Q9. React 如何通过 className 或者 style 属性对组件进行样式编写？

这个属于前端基础问题，可以参考React普通样式(className)和行内样式(LineStyle)多种设置样式设置详解 这篇文章进行学习编写。

另外，对于新人来讲，可以看一下 HTML、CSS 相关的基础知识 ，帮助自己更好的写前端代码，提升自身开发效率。

[Flcwl]

Q10. [HiUI4] 从 V3 升级过来的话，改动⼤不⼤？

1. 改动不⼤。改动的点以那些为主：抛弃过去不合理，或不规范的 api。
2. 对于想⽤ HiUI V4 的我们提供了 2 种策略：

• 分包安装，与 V3 共存，新模块或⻚⾯使⽤ V4
• 平缓升级，与 V3 共存，按需对⻚⾯组件进⾏ V3 到 V4 的局部升级（可以参考 CHANGELOG 进⾏）。

[Flcwl]

Q11. [HiUI4] 安装时 npm 提示包不存在？安装不了？

A：建议⼤家使⽤ Npm 官⽅镜像源 registry: http://registry.npmjs.org ，避免其它私有源，⽐如⼩⽶或淘宝源可能未及时同步更新或更新异常。

如果本地有 .npmrc ⽂件，请更新为：

@hi-ui:registry=https://registry.npmjs.org/ # 使⽤官⽅源

[Flcwl]

Q12. [HiUI4] 我项⽬ React 版本是 17，可以使⽤吗？

A：可以，只要是能⽀持 Hook 的版本就可以，也就是 >=16.8.6 的版本。
对于低版本 React（只要版本不是太低，应该是向下兼容的），也可以进⾏升级 React 版本来使⽤。

[Flcwl]

Q13. [HiUI4] Icons 怎么使⽤？按照之前的⽅式好像⽤不了了？

A：在 v4 之后，我们使⽤了 SVG 图标替换了原先的 font 图标，更改了使⽤⽅式，如下：

import { CloseOutlined } from '@hi-ui/icons';
// 可以使⽤ style 和 className 设置图标的⼤⼩和颜⾊
<CloseOutlined style={{ fontSize: '14px', color: '#eee' }} />;

模拟合包：

import * as Icons from '@hi-ui/icons';
export const Icon = ({ name, ...rest }) => {
const Comp = Icons[name]
return Comp ? <Comp {...rest} /> : null;
}
<Icon name={'MessageOutlined'} style={{ fontSize: '16px', color: '#08c'
}} />;

带来的优势是巨⼤的：利⼤于弊

• 优化视觉：在任何设备（低端）上 SVG 有更好的清晰度。
• 优化体验：完全离线化使⽤，⽆需下载庞⼤的字体⽂件，图标也不会因为⽹络问题呈现⽅块或
  乱码。
• 优化性能：按需引⼊单独 Icon，避免⽆⽤ Icon 资源加载导致资源浪费。
• 优化开发：所有的图标都会以 标签渲染，可以使⽤更多原⽣ SVG 本身的 DOM API。

[Flcwl]

Q14. [HiUI4] TS 好严格呀，写起来好痛苦？⽐如：下图传⼊空字符串就会报错？

A：对于下图， Tooltip 组件 placement 类型只接受 undefined（不传） 或者 ⽅位枚举值。严格按照其类型定义来编写代码即可。

另外，⾮法的⽤法都会得到爆红提示，这样也使得问题更容易得到排查，同时可以避免很多潜在的 BUG，因此只会让代码更健壮。

值得⼀提的是，对于具有功能粘合但是 TS 约束不到的 props API ，我们也会给予拦截，并给⽤户友好的报错堆栈提示。

[Flcwl]

Q15. [HiUI4] 封装 HIRequest ⼯具好像不⻅了，该如何引⼊使⽤它？

A：HIRequest 它现在是单独的库，叫做 @hi-ui/request。直接安装然后 import request from '@hi-ui/request' 引⼊使⽤即可。

[Flcwl]

Q16. [HiUI4] HiUI V4 ⾥⾯Tooltip\Popover 好像不⽀持包裹⾃定义组件？

A：v4的类似Tooltip的组件都做了⼀些优化。

类似 Tooltip的组件都需要确保⼦元素接收对应 trigger 的事件，⽐如 onMouseEnter 、onMouseLeave 、 onFocus 、 onClick 、 onContextMenu 事件。

内部默认没有包裹⼀层div 做事件收集，⽬的是避免多⼀层 div 污染样式布局（⽐如外层是 flex ，当前元素本来设置的 flex:1 就失效了，导致问题难以排查，甚⾄需要重新修改代码）。

[Flcwl]

Q17. [HiUI4] HiUI V4 Form Item rules ⾥配置了 required，但是为啥不显示红⾊的星号？

A：v4的 Form 对星号展示做了⼀些额外的处理：展示星号和是否进⾏必填校验是隔离的。

⽬的其实很简单：

• 有些场景需要校验但不要星号的，⽐如登录⻚⾯，⽤户名和密码必填会校验，但是很少会有 * 这种强交互；
• 还有些场景是想要星号但不要检验的，⽐如有些同学不想⽤ Form ⾃带的校验，想⾃定义校验⾃⼰控制是否展示星号。

具体解决办法如下：

• 若需要在开启 required 校验同时也展示红色星号，在 Form 上设置 showRequiredOnValidateRequired: true 即可。

• 若只需要展示红⾊星号，直接在 FormItem 上传⼊ required 即可。

<FormItem field="testInput2" required valueType="string" label="密码">
  <Input /> 
</FormItem>

• 若只需要对表单控件字段进⾏校验⾮空，需要传⼊校验规则 rules 设置属性 required: true 开
  启以及错误提示 message：

<FormItem
  label="Checkbox"
  field="checkbox"
  validateTrigger="onChange" // 触发校验时机
  rules={ // 校验规则
    [{
      required: true,
      message: '请输⼊内容'
    }]
  }
  valueType="string" // 检验值类型
>
  <Input />
</FormItem>