首页手记 React.js 开发参见问题 Q&A

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

标签：

Node.js JavaScript React.JS

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

1. 一些课程资源

课程源码 GitHub 地址：https://github.com/ParryQiu/IMOOC-React

1.1 2018-03-26 更新

针对源码文件夹 react-router-4_webpack-2-update 更新了免费的讲解视频。

主要讲解了如下几个问题

如果初始化下载的源码；
如何在本地运行项目；
如何修改代码，可以直接打开 html 就可以运行，这样你就可以将 React 的项目直接当成一个静态站点进行部署。

1.2 我提供的其他原创免费视频课程

Webpack 2 视频教程 https://devopen.club/course/webpack
VSCode 高效开发必装插件 https://devopen.club/course/vscode

1.3 其他下载

课程完整的思维导图请查考文章：React.js 入门与实战课程思维导图，我使用的思维导图软件是 Mac 下的 iThoughtsx。
如果你想下载不包含 node_modules 的源码，请访问我上传到 GitHub 的版本：https://github.com/ParryQiu/IMOOC-React
课程网站源码包请参考慕课问答区：课程里面说的各个章节的源码在哪里哦，此源码包含了 node_modules ，所以压缩文件达到了 1 个多 G，不过这样就保证了不会因为组件版本的原因引起的课程学习疑惑。

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/1c37UhQK
密码: rwug

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