React版本踩坑🦌

记在前面:为了使用ES6语法,React在新版本中更新了很多API,很多旧的语法已经被遗弃,但是网络中很多教程又依赖于旧版本,导致很多bug问题。也怪自己眼笨😞 看到老版本的教程。

react最新文档:http://www.css88.com/react/
react-router最新文档:http://reacttraining.cn/web/guides/quick-start
redux文档:https://github.com/camsong/redux-in-chinese
react社区🏠:http://react-china.org/

  1. componet封装
  2. 使用PropTypes检查prop类型
  3. react-router版本问题

1. componet封装后,一般不使用createClass

参考:React.createClass 对决 extends React.Component

2. 使用PropTypes检查prop类型

ClickCounter.propTypes = {
    label: React.PropTypes.string.isRequired,
    initialValue: React.PropTypes.number
}

报错如下:

image.png

原因:在之前的版本之中,我们可以通过React.PropTypes这个API访问React内置的一些类型来检查props,在15.5.0版本中,这一API被独立成了一个新的包 prop-types
解决

import PropTypes from 'prop-types'
...
ClickCounter.propTypes = {
    label: PropTypes.string.isRequired,
    initialValue: PropTypes.number
}

3. react-router版本问题

使用react-router如下:

import { Router, Route } from 'react-router'
...
<Router>
    <div>
        <Route path='/login' component={ Login }></Route>
        <Route path='/regist' component={ Regist }></Route>
    </div>
</Router>
image.png

原因:react-router 4.0版本语法更新,React Router被拆分成三个包:react-router,react-router-dom和react-router-native,目前网站搭建只需要引入react-router-dom即可
解决:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

4. 组件引入错误

image.png
import ListView from './../../../components/ListView'

改成

import { ListView } from './../../../components/ListView'

持续踩坑中😊 ,敬请期待...

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 161,627评论 24 692
  • GUIDS 第一章 为什么使用React? React 一个提供了用户接口的JavaScript库。 诞生于Fac...
    jplyue阅读 3,072评论 1 11
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 7,002评论 2 35
  • 今天不知道是不是昨晚笑的事,又打开了一些。今天站的时候,也没刻意把注意力发身体上。但是中间还满长时间能感到热量。
    安心的心灵花园阅读 92评论 0 1
  • 张二娃今年三十有二,男,汉族,1984年8月生人,身高173cm,来自云南边远的山旮旯里头,至今单身未娶。...
    凌羽an阅读 154评论 0 0
  • 回望来时路 沉淀记忆花 时间如白驹过隙,转瞬间,我们都被远远抛在了后面。生活也如同浏览书卷一般,轻...
    红巧儿阅读 351评论 0 0