關於React-Admin 的一點開發實踐總結

React-admin是一個基於React，Material UI的後臺管理框架。在剛到公司的時候，導師爲了讓我儘快上手React又不敢分配核心需求給我寫，因此就讓我先作一個管理平臺消息發放的後臺管理系統，主要使用的就是React-admin框架。

React-Admin簡介

中文官網戳這裏 英文book戳這裏 官方Demo

（若是想詳細瞭解React-admin，我建議先看中文的介紹，有大概概念知道它是怎麼運做以後，再對着Demo看英文的book，由於有一些圖例和介紹中文翻譯不是很精確。）

React-Admin是一個封裝完善的中後臺應用框架，其中<Admin>根組件用於包裹整個應用並經過dataProvider屬性注入數據；<Resource>子組件用於獲取對應name屬性中聲明的api端點的數據，

import { PostList } from "./posts";

const App = () => (
  <Admin dataProvider={dataProvider}> <Resource name="posts" list={PostList} /> </Admin> ); 複製代碼

好比在上述代碼中，Resource用於將apiUrl/posts這個接口的數據導入PostList組件中。

當涉及到具體組件實現時，可使用React-Admin提供的四種視圖組件：List視圖組件，Show視圖組件，Create/Edit視圖組件。其中List主要用於展現列表，Create/Edit用於建立或編輯表單，Show以只讀方式顯示從API獲取的記錄。

React-Admin還有兩種基礎組件：Field組件和Input組件，它們是組裝視圖組件的基本元素。其中Field至關於基礎文本節點，能夠獲取對應source屬性的數據，而且Field根據數據類型不一樣還分爲ArrayField、DateField、NumberFiled、TextField等多種。相似的，Input組件顯示一個輸入、下拉列表等，也根據輸入的數據類型不一樣分爲DateInput、TextInput、SelectInput等。

以上由React-Admin封裝的各種組件都基於Material UI組件，會暴露一些可定義的樣式接口。此處須要注意的是，若是是覆蓋已有的css屬性，寫法爲

classes = {{override: classes.override}}
複製代碼

如果新增自定義的css樣式，寫法爲css in js

className = {classes.add}
複製代碼

React-Admin數據提供

Admin組件中經過dataProvider注入/上傳數據，它至關於鏈接React-Admin組件與服務端接口數據的中轉站，所以在自定義Data Provider時，須要兩個基本轉換函數convertDataRequestToHTTP和convertHTTPResponse，前者用於請求接口，後者用於處理接口返回的數據。

dataProvider自定了一系列請求動做，包括GET_LIST GET_ONE CREATE DELETE UPDATE 等，若是須要將Data Prover請求映射到REST後端，官方給的示例以下

GET_LIST => GET http://path.to.my.api/posts?sort=["title","ASC"]&range=[0, 24]&filter={"author_id":12}
GET_ONE => GET http://path.to.my.api/posts/123
CREATE => POST http://path.to.my.api/posts
UPDATE => PUT http://path.to.my.api/posts/123
DELETE => DELETE http://path.to.my.api/posts/123
複製代碼

即，不管是請求數據仍是處理返回數據，都須要將數據對應於其自定義動做中，這些動做的觸發者爲使用React-Admin組件，e.g.

const convertDataRequestToHTTP = (type, resouce, params) => {
    const options = {};
    switch (type) {
        case GET_LIST: {
            // LIST列表請求數據
        }
        case CREATE: {
            options.method = 'POST'
            // 表單建立時採用POST
        }
    }
}

const convertHTTPResponse = (response, type, resource, params) => {
    const {headers, json} = response;
    switch (type) {
        case GET_LIST: // LIST列表拿數據
        case CREATE: // 表單建立後的返回結果
    }
}
複製代碼

最後，須要將上述兩個轉換函數一塊兒從dataProvider這個Promise函數中return：

export default (apiUrl, httpClient = fetchUtils.fetchJson) => {
    const convertDataRequestToHTTP = {...}
    
    const convertHTTPResponse = {...}
    
    return (type, resource, params) => {
    	const { url, options } = convertDataRequestToHTTP(type, resource, params);
    	return httpClient(url, options).then(response => convertHTTPResponse(response, type, resource, params));
    };
}
複製代碼

若須要自定義請求頭，可在httpClient中定義。

其餘

• Input組件使用label聲明名字時會默認值互通，label設置放在source後面默認值就不會互通了
• 如何取包裹在框架內沒有暴露出的父節點，可用useEffect和parentNode
• 定義樣式時常會遇到Theme.spacing(n)，其默認縮放係數爲 8px，即Theme.spacing(n)實際等於 8*n px
• create react app裏放在public中的公共文件在index.html中引用時，路徑爲 <script src="%PUBLIC_URL%/common.js"></script>