react-admin 问题及解决方案汇总--FAQ

项目中遇到的问题和找到的解决方案进行汇总清单~

Aug 28 '17 15:08 yezihaohao

问题描述： create-react-app 打包项目run build 增加进度条信息。

解决方案： 使用webpack plugin --- ProgressPlugin

操作: 找到scripts目录下的build.js 增加以下代码

  let compiler = webpack(config);
  
 + compiler.apply(new webpack.ProgressPlugin({
 +     profile: true
 +}));

Aug 28 '17 15:08 yezihaohao

问题描述： create-react-app脚手架项目怎么添加proxy代理请求。 解决方案： package.json增加代理请求配置。 操作： 找到项目根目录下的package.json，增加以下代码

// 简单单个操作，请求fetch('/api/todos')，将匹配fetch('http://localhost:4000/api/todos')
"proxy": "http://localhost:4000",
// 更多的配置
"proxy": {
    "/api": {
      "target": "<url>",
      "ws": true
      // ...
    }
  }

更多的配置操作请参照：https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development

Aug 31 '17 02:08 yezihaohao

作者，你好；我在本地package.json配置，"proxy": "http://www.weather.com.cn"，然后在页面上进行请求数据，

import 'whatwg-fetch';
    fetch('http://www.weather.com.cn/data/cityinfo/101010100.html').then( res => {console.log(res);return res.json();}).then(json => json).catch( err => {
      console.log('err', err);
    });

结果报错：Fetch API cannot load http://www.weather.com.cn/data/cityinfo/101010100.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3006' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

请你帮忙指点一下，谢谢。

Sep 21 '17 09:09 fangjj

@fangjj
配置了proxy之后，请求就不需要再带域名了。 fetch('/data/cityinfo/101010100.html').then(res => res.json()).then(json => console.log(json)).catch(err => console.log(err)); 有其他问题可以加群哈。

Sep 21 '17 09:09 yezihaohao

nice，搞好了。thank you! 已经加群了。

Sep 21 '17 09:09 fangjj

问题描述： 在使用hashRouter的情况下怎么实现类似锚点跳转 解决方案： 使用Element.scrollIntoView() 操作： 代码示例

const scrollToAnchor = (anchorName) => {
    if (anchorName) {
        // 找到锚点
        let anchorElement = document.getElementById(anchorName);
        // 如果对应id的锚点存在，就跳转到锚点
        if(anchorElement) {
            anchorElement.scrollIntoView();
            // 如果页面有固定header，处理顶部header遮挡title的问题
            const scrolledY = window.scrollY;
            if(scrolledY){
                window.scroll(0, scrolledY - 100);   // 100为header高度
            }
        }
    }
};

Nov 17 '17 02:11 yezihaohao

作者你好：目前该项目整体配色为黑色，我希望整体还原为antd的初始蓝色。请问如何解决？

Nov 29 '17 04:11 Helaiqu

@Helaiqu 去掉webpack里面的自定义主题就可以换回默认蓝色了。这个issue不做过多讨论呢，可以加群或者另开issue

Nov 29 '17 07:11 yezihaohao

问题描述： create-react-app脚手架增加多入口html文件 解决方案： https://github.com/facebookincubator/create-react-app/issues/1084

Nov 30 '17 05:11 yezihaohao

问题描述： 在不执行npm run eject的情况下，使用异步加载组件，进行代码拆分。code-splitting-in-create-react-app 解决方案：https://github.com/facebookincubator/create-react-app/issues/2477

Nov 30 '17 05:11 yezihaohao

router.push()报错表现在登陆界面跟退出

this.props.router.push() 在V4版本应为 this.props.history.push()

Dec 14 '17 10:12 davecat

@davecat 是的。漏掉了，已经修复。

Dec 15 '17 12:12 yezihaohao

作者封装的那个post请求我这边 export const fetchData = ({funcName, params, stateName}) => dispatch => { !stateName && (stateName = funcName); dispatch(requestData(stateName)); return httpfuncName.then(res => dispatch(receiveData(res, stateName))); }; 如果这个方法是post请求浏览器回报错误 TypeError: Cannot read property 'then' of undefined (anonymous function) src/action/index.js:21 18 | export const fetchData = ({funcName, params, stateName}) => dispatch => { 19 | !stateName && (stateName = funcName); 20 | dispatch(requestData(stateName));

21 | return httpfuncName.then(res => dispatch(receiveData(res, stateName))); 22 | }; 23 | 24 |

Jan 21 '18 02:01 blackboy1987

@blackboy1987 你改过代码？ http[funcName](params).then？ 。如果没改过，看下你有没有写对应的请求接口函数

Jan 22 '18 11:01 yezihaohao

是的有的地方改了的。

Login.jsx的33行改成： fetchData({funcName: 'admin',params:values, stateName: 'auth'});

         //if (values.userName === 'admin' && values.password === 'admin') fetchData({funcName: 'admin', stateName: 'auth'});
        // if (values.userName === 'guest' && values.password === 'guest') fetchData({funcName: 'guest', stateName: 'auth'});

因为我要post表单提交所以传递了参数. 2.axios/index.js的第5行改成了： import { get,post } from './tools'; 因为admin方法执行post请求，导入了post方法 3.axios/index.js的第36行改成了： export const admin = (params) => post({url: config.MOCK_AUTH_ADMIN,data:params}); 增加了传递参数

Jan 23 '18 15:01 blackboy1987

问题描述： react-router 4.x的版本路由怎么以问号的形式传参数并且以key: value对象的形式传递给组件props？ 解决方案： 安装query-string插件库，解析location.search的字符串，然后合并到props上，传递给组件。栗子：

import queryString from 'query-string';
<Route
   exact
   path="/xxx/xxx"
   render={props => {
      Object.assign(props, {query: queryString.parse(props.location.search)});
      return <Component {...props} />
     }
   }
/>

在对应的路由组件中，this.props.query对象便是问号形式的参数

Mar 23 '18 08:03 yezihaohao

请问一下彩色图标如何配置的, 我的项目里都是黑白的...