javascript - Webpack 构建 React.createClass 不是一个函数

Question

我有一个带有 webpack 模块构建器的 ReactJS 应用程序，以下是我的 中的配置webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: {
        app : './src/scripts/app.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'public')
    },
    context: __dirname,
    resolve: {
        extensions: ['.js', '.jsx', '.json', '*']
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                options: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
};

---

我的 app.js

中有以下代码

import React from 'react';
import ReactDOM from 'react-dom';

var MainApp =  React.createClass({
    render: function(){
        return (
            <div>
                <div>Header component</div>
                <div>Boady component</div>
            </div>
        );
    }
});

ReactDOM.render(
    <MainApp />,
    document.getElementById('container')
);

现在运行服务器后，当我在浏览器中加载我的页面时出现以下错误:

Uncaught TypeError: _react2.default.createClass is not a function

附上错误信息截图:

我想了解有关此问题的更多详细信息，非常感谢您的帮助。

Answer 1

你需要安装这个 npm 扩展:

npm install create-react-class --save

然后使用这段代码:

var createReactClass = require('create-react-class');
var MainApp = createReactClass({
    render: function(){
        return (
            <div>
                <div>Header component</div>
                <div>Boady component</div>
            </div>
        );
    }
});
            }