createClass报错

Question

项目用create-react-app脚手架构架项目，只想简单练习，没想到报错，代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import registerServiceWorker from './registerServiceWorker';

var Card = React.createClass({

render: function() {
  return (
    <div><p>123</p></div>
    )
}

});
ReactDOM.render(<Card />, document.getElementById('root'));
registerServiceWorker();

错误如下：

TypeError: __WEBPACK_IMPORTED_MODULE_0_react___default.a.createClass is not a function
./src/index.js
C:/Users/MatCloud/Desktop/mutest/test-react/src/index.js:7
4 | // import App from './App';
5 | import registerServiceWorker from './registerServiceWorker';
6 |

7 | var Card = React.createClass({
8 | render: function() {
9 | return (
10 | <div><p>123</p></div>
View compiled
▶ 6 stack frames were collapsed.

Answer 1

在 React@15.5.0 不推荐这样用 React.createClass, 建议使用 ES6 class

Functional and Class Components

// 类定义
class Card extends React.Component {
    render(){
       return(
           <div><p>123</p></div>   
        )
     }
}

// 函数定义
const Card = () => <div><p>123</p></div>;

或者替换方案:

// Before (15.4 and below)
var React = require('react');

var Component = React.createClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

// After (15.5)
var React = require('react');
var createReactClass = require('create-react-class');

var Component = createReactClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  }
});