关于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>