鍍金池/ 問答/HTML/ createClass報(bào)錯(cuò)

createClass報(bào)錯(cuò)

項(xiàng)目用create-react-app腳手架構(gòu)架項(xiàng)目，只想簡(jiǎn)單練習(xí)，沒想到報(bào)錯(cuò)，代碼如下：

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();

錯(cuò)誤如下：

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.
回答
編輯回答
情皺

在 React@15.5.0 不推薦這樣用 React.createClass, 建議使用 ES6 class

Functional and Class Components

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

// 函數(shù)定義
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 />;
  }
});
2017年12月1日 22:45