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