React UI 库：React Suite 4.0.2 版本更新-多项Bug修复和新手入门

React Suite简介

React Suite 是一套 React 组件库，为后台产品而生，支持 Typescript, 支持服务端渲染。由 HYPERS 前端团队与 UX 团队打造，主要服务于公司大数据产品线。经历了三次大的版本更新后，累积了大量的组件和丰富的功能。

4.0.2更新内容以下：

• Feature: 添加组件对繁体中文的支持. (#652)

• Bugfix: 修复了 CheckTreePicker 和 TreePicker 键盘操做无效的问题。

• Bugfix: 修复了 <Cascader> 搜索列表样式问题 (#651)

• Bugfix: 修复了 <Cascader> 和 <MultiCascader> 不受控的问题 (#650)

• Bugfix: 修复了 <Cascader> 搜索正则表达元字符报错的问题. (#648)

• Bugfix: 修复了 <Panel> 标题字体大小与设计不符的问题.(#644)

• Bugfix: 修复了选项在设置 active 或者 disable 后的样式问题. (#641)

• Bugfix: 修复了 <Sidebar>在 Firefox 浏览器不能收缩的问题 (#638)

• Bugfix: 修复了 <Tree> 在服务端渲染报错的问.(#637)

• Bugfix: 修复了 <CheckTreePicker> 设置根节点不可点击后出现的渲染问题.(#637)

• Bugfix: 修复了 IE 浏览器兼容性问题. (#631,#632)

• Bugfix: 修复了 <Table> 的列设置中存在 null 时候，致使的渲染出错问题. (rsuite/rsuite-table#99)

• Bugfix: 修复了 <Table> 在改变高度后出现白屏的问题. (rsuite/rsuite-table#97)

• Bugfix: [TS] 修复了 Notification 和 Alert 中缺乏的方法定义. (#633)

• Bugfix: [TS] 修复了 List 组件找不到定义. (#625)

下载地址：https://rsuitejs.com/en/

支持的平台

浏览器

React Suite 支持最新的，稳定版的所有主流浏览器和平台。从 React Suite 3 开始不支持 IE9 如下版本(包括 IE9)。不推荐在移动端使用。

React Suite浏览器支持

服务端

React Suite 支持服务端渲染， 支持经过 Next.js 构建应用。

支持的开发环境

• 支持 React 16 +

• 支持 TypeScript

• 支持 Flow

• 支持 Electron

入门

一、安装

React Suite 可经过 nam 安装。

npm i rsuite --save

二、使用

代码示例：

import { Button } from 'suite';
import 'rsuite/styles/less/index.less'; // 或者 'rsuite/dist/styles/rsuite.min.css'
ReactDOM.render(<Button>Button</Button>, mountNode);

好了，就是这么简单！

React踩坑整理

问题一、在搭建react脚手架，安装好路由，项目正常运行后，想安装axios来获取服务器API接口数据。

在运行了npm install axios --save以后，运行npm start项目报错，都是一些can not find module...

在百度上百度了要删除node_modules文件，再从新运行npm i，结果仍是不行。

最后找到解决办法是：先删除node_modules，再删除package-lock.json，注意不是package.json，别删错了，而后执行npm i，最后执行npm start，成功运行。

问题二、es6不支持在<img />标签内直接写图片的路径

如：<img src="../images/photo.png"/>

最开始在webstorm打img而后按enter键，出来了：<img src="" alt=""/>，而后我采用require方法引入图片：

<img src=“{require('../assets/images/1.jpg')}” alt=""/>

结果图片显示不出来，检查一下，须要把"src="后面的双引号去掉方可。

问题三、Warning: Failed prop type: Invalid prop component of type object supplied to Route, expected function

解决方案：是由于 route 中的 component 没有组件和函数

问题四、使用create-react-app，将全局的变量(jquery)定义到window中，在别的JS文件报"$ no undef"

解决方案：是由于eslint插件中未在全局定义变量或者去除node_modules中的react-scripts文件中的webpack.config.dev.js中eslint的插件去掉就行

问题五、mapStateToProps获取不到数据

createStore('reducer的总仓库'，初始的数据)

const ADD_ID = (state = {},action) =>{

switch(action.type){

case 'ADD_ID':

return Object.assign(state,action)

}

}

// 这里state默认为ADD_ID的数据 state = {};

// 必须将state包含在返回的数据内，这样才会存储到全局的数据中

问题六、reducer 能够接受state，可是毫不能修改state

纯函数指的是，给定固定的输入，就必定会有固定的输出，并且不会有任何反作用

更多案例（GitHub）

管理系统：https://github.com/rsuite/rsuite-management-system