React.js 开发参见问题 Q&A

文章中我整理了 React.js 开发过程中一些参见问题的解答汇总，供大家参考。

1. 一些课程资源

课程完整的思维导图请查考文章：React.js 入门与实战课程思维导图，我使用的思维导图软件是 Mac 下的 iThoughtsx。

课程网站源码包请参考慕课问答区：课程里面说的各个章节的源码在哪里哦，此源码包含了 node_modules ，所以压缩文件达到了 1 个多 G，不过这样就保证了不会因为组件版本的原因引起的课程学习疑惑。

如果你想下载不包含 node_modules 的源码，请访问我上传到 GitHub 的版本：https://github.com/ParryQiu/IMOOC-React

2. 执行 webpack-dev-server --content-base src --hot --inline 出错

在新版本的 webpack-dev-server 中，因为取消了 content-base 参数，所以需要热加载自动刷新的话，直接执行命令 webpack-dev-server --hot --inline 即可。

3. 使用 Webpack 2 搭建的 React 浏览器自动刷新的项目模板

如果还是有同学不能搭建出能够浏览器自动刷新的配置，那么请直接下载我配置好并测试过的，使用最新的 webpack 2 配置的项目模版即可。
项目地址: https://github.com/ParryQiu/React-Webpack2-HMR-Template

运行方法

• cd React-Webpack2-HMR-Template
• npm install
• npm start
• 修改 index.js 文件代码，浏览器自动刷新

4. 安装了 React Developer Tool 后调试状态下不显示

请确认下载安装的版本是 2.0 版本，建议直接***后去官方商店下载，不要使用百度等搜索引擎搜索下载旧版本。

5. 缺少 react-html-attrs 插件

在项目文件夹下执行命令 npm install babel-plugin-react-html-attrs 即可。

6. 关于处理 babel-loader 没加载的错误

如果在运行 webpack-dev-server 的时候出现了如下的错误。

请执行以下命令 npm install babel-loader
重新运行后即可正常运行了。

7. 使用 React 中的 fetch

可以参考我的博文：在 JS 中使用 fetch 更加高效地进行网络请求

8. webpack-dev-server 占用端口 8080 的问题

当出现了端口占用的问题时，请结束掉占用端口的进程后重新运行即可。

9. 错误 The root route must render a single element 的处理

需要注意 Route 绑定的 component 中的 class 有没有添加 export default。

10. 如何在chrome console 中打开 paint flashing

在 console 中的第二个窗口 rendering 下，如果不显示你可以在 console 下点击键盘 Esc 打开。

11. 父组件通过 refs 获取子组件真实 DOM 节点的问题

请参见问答区：父组件通过refs获取子组件真实dom节点的问题
主要是可以通过 ReactDOM.findDOMNode(this.refs.rootChild) 进行获取。

12. 代码跳转 Route 的问题

请参见问答区：老师你好，我想在点击登录的时候用router定位到特定页面怎么做？

13. 如何将 AntDesign 中的 getFieldProps 替换成 getFieldDecorator

请参见问答区：如果要把getFieldProps替换成getFieldDecorator的话
或者参见官方文档：Form 表单

14. Target container is not a DOM element

错误截图如下

原因是没有将页面的 JS 文件放在目标 div 的下面，注意下图正确的文件顺序。

15. 慕课没有发布的更新课程

之前录制了「项目优化实战与可维护代码的编写」，没有通过慕课的审核，所以分享给需要这部分知识的同学继续学习，注意，即使是这两集，也不可用于任何商业用途，否则必将追究一切的法律责任，小心 ^_^。

链接:https://pan.baidu.com/s/1mhJA9ks
密码:epaf

16. React Router 4.0 中 location undefined 的问题

版本 4.0 中对 hashHistory 做了迁移，你需要执行包安装命令 npm install react-router-dom 后，按照如下的代码进行使用即可。

{% codeblock lang:csharp%}
import { HashRouter } from 'react-router-dom'

{% endcodeblock %}

文档请参见这里：https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md

官方的 issue：https://github.com/ReactTraining/react-router/issues/4752

17. AntDesign 文档中的函数语法错误以及 ES7 语法的支持方法

如果你直接照搬 AntDesign 的语法，可能会遇到如下错误。

原因是因为此文档使用了最新的 ES7 的语法，所以如果你想这样使用，你需要安装 babel-preset-stage-0 组件。
需要在项目文件夹下执行如下命令即可：npm install --save-dev babel-preset-stage-0。

如果需要安装其他对应的规则集，如下供参考。

• ES2015转码规则
  $ npm install --save-dev babel-preset-es2015

• react转码规则
  $ npm install --save-dev babel-preset-react

• ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
  $ npm install --save-dev babel-preset-stage-0
  $ npm install --save-dev babel-preset-stage-1
  $ npm install --save-dev babel-preset-stage-2
  $ npm install --save-dev babel-preset-stage-3

18. 解决 webpack-dev-server 不能自动刷新的问题

请参见我的博文 解决 webpack-dev-server 不能自动刷新的问题

2017-04-08 更新了最新版本的 webpack 2 浏览器自动刷新的视频教程，请参见这里：http://v.youku.com/v_show/id_XMjY5NTg4NzU4OA==.html，如果你不想使用和课程一样的 1.0 版本但是又看不懂最新版本的文档，请参见此视频即可。

19. 解决课程中 React Router 版本的差异问题

您可以直接查看最新的 React Router 4 的文档自己学习，如果想使用和课程一样的版本，请安装特定的版本和课程同步学习。

npm install react-router@2.8.1

这样安装的版本就是 React Router 2 的版本，所有的使用就会和课程一样了。

20. 课程实战新闻项目 API 源码以及 API 地址

源码地址：https://github.com/ParryQiu/IMOOC-React-NewsAPI

API 请求地址

• 获取新闻列表
• 获取新闻详情
• 获取文章评论
• 新闻添加评论
• 收藏新闻
• 注册登录接口
• 获取用户收藏
• 获取用户发出的评论