Question

我真的在与Webpack＆amp; amp;反应。似乎很久以来，Node 5.0没有注册我在package.json'dependencies'中安装的npm模块。今天，我将Node升级到了5.2，现在看起来很好。

然而，现在我正努力让模块中的React代码工作。

Webpack不会报告任何错误。 Chrome控制台说：

“未捕获错误：不变违规：ReactDOM.render（）：组件元素无效。” （指向Main.jsx文件）。

有很多依赖关系＆amp;我的webpack配置相当冗长，所以我犹豫地在这里发布了main.jsx文件内容。整个repo（使用长度配置文件，但React代码本身只有几行）是here on Bitbucket。

main.jsx：

import React from 'react';
import ReactDOM from 'react-dom';
import AppParent from './components/App.jsx';
main ();
function main () {
    const app = document.createElement ('div');
    document.body.appendChild (app);
    ReactDOM.render (AppParent, app);
};

App.jsx：

import React from 'react';
import Topbar from './Topbar.jsx';
export default AppParent;
var AppParent = React.createClass ({
    render : function () {
        return (
            <div className = 'ReactParent'>
            </div>
        );
    }
});

Answer 1

在render方法中，您需要渲染元素：

ReactDOM.render (<AppParent />, app);

您正在传递React component class。

Answer 2

您没有呈现应该是ReactDom.render(<AppParent />, app)

的元素

Webpack＆amp;通过Babel与Es2015模块进行反应

2 个答案: