本文总阅读量:  次 | 文章总字数: 3,612 字

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

截图

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

1. 一些课程资源

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

1.1 2018-03-26 更新

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

主要讲解了如下几个问题

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

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

1.3 其他下载

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 后，按照如下的代码进行使用即可。

import { HashRouter } from 'react-router-dom'

<HashRouter>
  <App/>
</HashRouter>

文档请参见这里：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 [email protected]

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

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

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

API 请求地址

21. 针对源码文件夹 react-router-4_webpack-2-update 更新的讲解视频

  • 主要讲解了如下几个问题

  1. 如果初始化下载的源码；

  2. 如何在本地运行项目；

  3. 如何修改代码，可以直接打开 html 就可以运行，这样你就可以将 React 的项目直接当成一个静态站点进行部署。

–EOF–

转载须以超链接形式标明文章原始出处和作者信息