网站首页 > 基础教程 正文
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
入门
1、安装
React Suite 可通过 nam 安装。
npm i rsuite --save
2、使用
代码示例:
import { Button } from 'suite'; import 'rsuite/styles/less/index.less'; // 或者 'rsuite/dist/styles/rsuite.min.css' ReactDOM.render(<Button>Button</Button>, mountNode);
好了,就是这么简单!
React踩坑整理
问题1、在搭建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,成功运行。
问题2、es6不支持在<img />标签内直接写图片的路径
如:<img src="../images/photo.png"/>
最开始在webstorm打img然后按enter键,出来了:<img src="" alt=""/>,然后我采用require方法引入图片:
<img src=“{require('../assets/images/1.jpg')}” alt=""/>
结果图片显示不出来,检查一下,需要把"src="后面的双引号去掉方可。
问题3、Warning: Failed prop type: Invalid prop component of type object supplied to Route, expected function
解决方案:是因为 route 中的 component 没有组件和函数
问题4、使用create-react-app,将全局的变量(jquery)定义到window中,在别的JS文件报"$ no undef"
解决方案:是因为eslint插件中未在全局定义变量或者去除node_modules中的react-scripts文件中的webpack.config.dev.js中eslint的插件去掉就行
问题5、mapStateToProps获取不到数据
createStore('reducer的总仓库',初始的数据)
const ADD_ID = (state = {},action) =>{
switch(action.type){
case 'ADD_ID':
return Object.assign(state,action)
}
}
// 这里state默认为ADD_ID的数据 state = {};
// 必须将state包含在返回的数据内,这样才会存储到全局的数据中
问题6、reducer 可以接受state,但是绝不能修改state
纯函数指的是,给定固定的输入,就一定会有固定的输出,而且不会有任何副作用
更多案例(GitHub)
管理系统:https://github.com/rsuite/rsuite-management-system
模块化按需加载:https://github.com/rsuite/examples/tree/master/modular-import
CDN 引入:https://github.com/rsuite/examples/tree/master/cdn
国际化方案:https://github.com/rsuite/examples/tree/master/intl-app
多主题方案:https://github.com/rsuite/examples/tree/master/multiple-themes
在 create-react-app 中使用:https://github.com/rsuite/examples/tree/master/create-react-app
在 Flow 中使用:https://github.com/rsuite/examples/tree/master/flow-app
在 TypeScript 中使用:https://github.com/rsuite/examples/tree/master/typescript-app
在 Next.js 中使用:https://github.com/rsuite/rsuite-management-system-ssr
- 上一篇: 轻量级CSS动画引擎,简单动画就靠你了——AniX
- 下一篇: 前端设计模式之混入模式(Mixin)
猜你喜欢
- 2024-11-25 React 与 虚拟DOM
- 2024-11-25 Vue 的这5个技巧,可以大大提高我们的构建体验
- 2024-11-25 全新web前端开发教程之Jquery事件
- 2024-11-25 JQuery 实现简易记事簿
- 2024-11-25 一波Ts 基础大全;领先同事的机会来了
- 2024-11-25 Python教程:报表和日志精讲
- 2024-11-25 「jQuery-3」 获取和设置标签元素
- 2024-11-25 jq中attr 设置checkbox 选中状态中的坑
- 2024-11-25 「B/S端开发」DevExtreme初级入门教程 - 支持TypeScript
- 2024-11-25 jquery常用基础方法
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)