未捕获的 TypeError: (0 , _react.createClass) 不是函数

Question

我遇到了新的 React、Webpack 项目的问题。浏览器控制台出现无法解决错误：“Uncaught TypeError: (0 , _react.createClass) is not a function”

你能帮帮我吗？

Opera 控制台截图

webpack.config.babel.js

import path from 'path';

export default {
    mode: 'development', // development, production or none
    entry: './assets/js/index.js',
    output: {
        path: path.resolve(__dirname, 'dist/js'),
        filename: 'bundle.js',
        sourceMapFilename: 'bundle.map'
    },
    // devtool: '#source-map',
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loaders: ['babel-loader']
        }]
    }
};

.babelrc

{
    "presets": [
        "env",
        "stage-0",
        "react"
    ]
}

index.js

import { createClass } from 'react';
import { render } from 'react-dom';

const Note = createClass({
    displayName: 'Note',
    render() {
        return (
            <div className='TEST'>
                Hello world
            </div>
        );
    }
});

render(
    <Note />,
    document.body
);

Visual Studio 代码中的项目截图

package.json

{
  "dependencies": {
    "normalize.css": "^8.0.0",
    "react": "^16.4.0",
    "react-dom": "^16.4.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "eslint": "^4.19.1",
    "eslint-plugin-react": "^7.8.2",
    "path": "^0.12.7",
    "webpack": "^4.10.2",
    "webpack-cli": "^2.1.4"
  },
  "name": "notes",
  "version": "0.0.1",
  "description": "",
  "main": "webpack.config.babel.js",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Andrew Dyachenko",
  "license": "ISC"
}

Answer 1

createClass 函数已从 react v16.0 中删除。

我不知道你为什么想要它。 （也许如果您需要迁移旧项目）

无论如何，你需要安装一个不同的包create-react-class。

npm i -s create-react-class

然后

import { render } from 'react-dom';
import createReactClass from 'create-react-class';


const Note = createReactClass({
    displayName: 'Note',
    render() {
        return (
            <div className='TEST'>
                Hello world
            </div>
        );
    }
});

render(
    <Note />,
    document.getElementById('root') // rendering on document.body is bad. You should avoid it. Create a tag with id `root`
);

---

如果您正在学习任何旧教程（如果以防万一），则新语法是

import { render } from 'react-dom';
import { component }from 'react';

class Note extends component{
    displayName: 'Note',
    render() {
        return (
            <div className='TEST'>
                Hello world
            </div>
        );
    }
}

// or, just simply  (in this case)

const Note2 = () => <div className='TEST'>Hello world</div>;

render(
    <Note />,
    document.getElementById('root') 
);