在React中使用extends React.Component定义的组件

前端之家收集整理的这篇文章主要介绍了在React中使用extends React.Component定义的组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在《React 快速上手开发》的第二章,组件的生命周期,创建组件的API是这么写的:

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组件的方式,殊途同归;具体的三种方式:@H_301_22@

  • 函数式定义的无状态组件
  • 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出来,下次再约。

原文链接:https://www.f2er.com/react/302280.html

猜你在找的React相关文章