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

最新推荐文章于 2024-06-19 08:03:07 发布

Stangor

最新推荐文章于 2024-06-19 08:03:07 发布

阅读量7.6k

点赞数 1

分类专栏： react-js 文章标签： react-js

本文链接：https://blog.csdn.net/stanxl/article/details/78609028

版权

react-js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在《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组件的方式，殊途同归；具体的三种方式：

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

Stangor

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
在React中使用extends React.Component定义的组件

在《React 快速上手开发》的第二章，组件的生命周期，创建组件的API是这么写的：var MyComponent = React.createClass({ render:function(){ return (<h1> hello world </h1>) }});ReactDOM.render( React.createElement(MyCompo
复制链接

扫一扫