React 组件未使用最新版本呈现答案

【问题标题】：React component not rendering on with latest versionReact 组件未使用最新版本呈现
【发布时间】：2018-04-21 14:59:04
【问题描述】：

我的 react 组件没有渲染，所以我怀疑很多事情，直到我注意到它只适用于较旧的 React 版本：

npm install --save react@0.14.7

组件未使用最新的 React（版本 16）呈现。

应该改变什么才能使它与 React 16 一起工作？

webpack.config.js：

module.exports = {
    entry: "./app-client.js",
    output: {
        filename: "public/bundle.js"
    },
    module: {
        loaders: [
            {
                exclude: /(node_modules|app-server.js)/,
               loader: 'babel-loader'
            }
        ]
    }
};

.babel.rc：

{
    "presets": [
        ["es2015"],
        "react"
    ],
    "plugins": [
        "babel-plugin-transform-class-properties"
    ]
}

app-client.js：

var React = require('react');
var APP = require('./components/APP');

React.render(<APP />, document.getElementById('react-container'));

app-server.js：

var express = require('express');

var app = express();

app.use(express.static('./public'));
app.use(express.static('./node_modules/bootstrap/dist'));

app.listen(3000);
console.log("Polling server is running at 'http://localhost:3000'");

组件/APP.js：

var React = require('react');

var APP = React.createClass({
    render() {
        return (<h1>Hello World form React</h1>);
    }
});

module.exports = APP;

【问题讨论】：

标签： reactjs webpack babeljs

【解决方案1】：

React.createClass 已被弃用很长时间。我的猜测是从 16.0 版开始不支持它（actually, I am correct）

所以，既然你问了你能做些什么来解决这个问题，这些是选项：

坚持使用版本
使用create-react-class 包（我也不推荐）
迁移到class组件（在我看来这是最好的选择）

【讨论】：

见下面的评论。另外，你能举一个“迁移到类组件”的例子吗？
首先是create-react-class，而不是react-create-class；那么，你需要在使用前做npm install
与 create-react-class 相同。未渲染
@trogne 也许这会对你有所帮助：reactjs.org/blog/2017/04/07/…
如果我在 app-client.js 中使用 ReactDOM 就可以了：ReactDOM.render(<APP />, document.getElementById('react-container'));

【解决方案2】：

根据Upgrade Guide，React.creaateClass 现在可作为单独的包react-create-class 提供。这就是为什么您的代码最有可能无法正常工作的原因。

另外，你必须使用ReactDOM.render，而不是React.render

【讨论】：

我更新了 APP.js，但仍然没有渲染：var ReactCreateClass = require('react-create-class'); var APP = ReactCreateClass({ render() { return(<h1>Hello World from React</h1>); } }); module.exports = APP;
请看我的编辑。（抱歉格式不好。免责声明：我已经在手机上写了这个。我一到电脑前就会更新格式）

【解决方案3】：

解决方案是使用“create-react-class”（感谢@pwolaq 和@Victor），并使用 ReactDOM 而不是 React 进行渲染：

APP.js：

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

var io = require('socket.io-client');

//var APP = React.createClass({
var APP = createReactClass({
    render() {
        return(<h1>Hello World from React</h1>);
    }
});

module.exports = APP;

app-client.js：

var React = require('react');
var ReactDOM = require('react-dom');
var APP = require('./components/APP');

//React.render(<APP />, document.getElementById('react-container'));
ReactDOM.render(<APP />, document.getElementById('react-container'));

【讨论】：