Question

我做了一个像这样的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不是函数”的例外，为什么？

Answer 1

通常，您将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;

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

1 个答案: