Question

我的反应组件没有呈现，所以我怀疑很多东西，直到我发现它只适用于较旧的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'");

components / APP.js：

var React = require('react');

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

module.exports = APP;

Answer 1

React.createClass已弃用很长时间了。我的猜测是，自版本16.0（actually, I am correct）

以来它不受支持

所以，既然你问你可以做些什么来解决这个问题，那么这些就是选择：

坚持版本＆lt; 16.0（我不推荐）
使用create-react-class包（我也不建议这样做）
迁移到class组件（我认为这是最佳选择）

Answer 2

根据Upgrade Guide，React.creaateClass现已作为单独的包提供，react-create-class。这就是为什么你的代码最不可能工作的原因。

此外，您必须使用React.render

而不是ReactDOM.render

Answer 3

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

APP.js：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.activities.SplashActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

</android.support.design.widget.AppBarLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/TMDBLogo"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:src = "@drawable/tmdb_logo"
        android:layout_gravity="center_horizontal|center_vertical" />

</LinearLayout>

</android.support.design.widget.CoordinatorLayout>

APP-client.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;

React组件未使用最新版本进行渲染

3 个答案: