记在前面:为了使用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/
- componet封装
- 使用PropTypes检查prop类型
- react-router版本问题
1. componet封装后,一般不使用createClass
参考:React.createClass 对决 extends React.Component
2. 使用PropTypes检查prop类型
ClickCounter.propTypes = {
label: React.PropTypes.string.isRequired,
initialValue: React.PropTypes.number
}
报错如下:
原因:在之前的版本之中,我们可以通过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>
原因: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. 组件引入错误
import ListView from './../../../components/ListView'
改成
import { ListView } from './../../../components/ListView'
持续踩坑中?? ,敬请期待...