常见 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/ # 使⽤官⽅源