时间戳

首页 > 解决方案 > 未捕获的 TypeError：React.createClass 不是函数异常

reactjs - 未捕获的 TypeError：React.createClass 不是函数异常

问题描述

我做了一个这样的html页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React project</title>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script src="react.js" type="text/babel"></script>
  </body>
</html>

而文件 react.js 像这样

var Comp1 = React.createClass({
  render: function() {
    return(
      <h1> Comp1 </h1>
    );
  }
});


ReactDOM.render(
  <div>
    <Comp1/>
  </div>,
  document.getElementById("root")
);

但是，我得到了“Uncaught TypeError: React.createClass is not a function”异常，为什么？

标签： reactjs

解决方案

通常你会将一个 React 组件定义为一个普通的 JavaScript 类：

class Comp1 extends React.Component {
  render() {
    return <h1> Comp1 </h1>;
  }
}

如果你还没有使用 ES6，你可以使用 create-react-class 模块来代替：

var createReactClass = require('create-react-class');
var Comp1= createReactClass({
  render: function() {
    return <h1> Comp1 </h1>;
  }
});

或者，

import React from 'react';

const Contacts = React.createClass({
  render() {
    return (
      <div></div>
    );
  }
});

export default Contacts;

推荐阅读