在React中使用extends React.Component定义的组件
2017-11-22 22:16
513 查看
在《React 快速上手开发》的第二章,组件的生命周期,创建组件的API是这么写的:
然后我按照上面的去创建,失败了,error 信息中可以看到它说”React.createClass is not a function”:
哎!这是咋回事,然后去google,说是React 版本的问题,第一次用React,也不知道这些版本问题,因为我用的CDN的方式引入React.js,而且引入的是最新版本。这应该就是问题所在,可是还是模糊它的版本问题,后来找到这里,人家写的很好:https://www.cnblogs.com/wonyun/p/5930333.html,人家在开头就把这个问题解释清了:
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式:
函数式定义的无状态组件
es5原生方式React.createClass定义的组件
es6形式的extends React.Component定义的组件
所以React.createClass是用的ES5,可以猜到现在我引用的React库应该是ES6,最新的版本没有向前兼容,这种版本快速迭代对于React小白来说,得抓紧适应。按照人家说的使用下面的这种方式创建组件,问题就解决了:
感觉每一步都走的很艰难,只是一个小问题,可能都会把我卡半天,但是还是得往前走。这里先不对React.Component作过多的分析,先整出一个hello world出来,下次再约。
var MyComponent = React.createClass({ render:function(){ return (<h1> hello world </h1>) } }); ReactDOM.render( React.createElement(MyComponent), document.getElementById('root') );
然后我按照上面的去创建,失败了,error 信息中可以看到它说”React.createClass is not a function”:
哎!这是咋回事,然后去google,说是React 版本的问题,第一次用React,也不知道这些版本问题,因为我用的CDN的方式引入React.js,而且引入的是最新版本。这应该就是问题所在,可是还是模糊它的版本问题,后来找到这里,人家写的很好:https://www.cnblogs.com/wonyun/p/5930333.html,人家在开头就把这个问题解释清了:
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式:
函数式定义的无状态组件
es5原生方式React.createClass定义的组件
es6形式的extends React.Component定义的组件
所以React.createClass是用的ES5,可以猜到现在我引用的React库应该是ES6,最新的版本没有向前兼容,这种版本快速迭代对于React小白来说,得抓紧适应。按照人家说的使用下面的这种方式创建组件,问题就解决了:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> class MyComponent extends React.Component{ render(){ return (<h1> hello world </h1>) }; } ReactDOM.render( React.createElement(MyComponent), document.getElementById('root') ); </script> </body> </html>
感觉每一步都走的很艰难,只是一个小问题,可能都会把我卡半天,但是还是得往前走。这里先不对React.Component作过多的分析,先整出一个hello world出来,下次再约。
相关文章推荐
- React-Native 基础(四)使用style定义组件的样式
- React组件自定义属性的定义及使用
- React学习笔记(6)---组件协同使用介绍
- 组件的使用 avalon.component("组件名",{})
- React第三方组件3(状态管理之Flux的使用①简单使用)
- React第三方组件4(状态管理之Reflux的使用③TodoList中)
- ReactJS学习系列课程(React 组件的组合使用)
- react-redux高阶组件connect方法使用介绍以及实现原理
- 【React Native开发】React Native控件之Switch开关与Picker选择器组件讲解以及使用(16)
- 详解使用React进行组件库开发
- 14、react之 组件的协同使用(组件的名字首字母必须大写)
- React第三方组件5(状态管理之Redux的使用⑤异步操作)
- React:createClass 和 extends Component的区别
- 【React】什么时候使用shouldComponentUpdate方法?
- 初学React:定义一个组件
- react 纯函数组件中使用ref属性方法
- react组件中使用ajax时this的指向问题
- react-native-scrollable-tab-view组件的简单使用
- spring组件扫描<context:component-scan/>使用详解
- Android使用ComponentName组件简单示例