反应渲染错误ReactDOM.render（）：无效的组件元素答案

【问题标题】：react render error ReactDOM.render(): Invalid component element反应渲染错误ReactDOM.render（）：无效的组件元素
【发布时间】：2016-02-06 08:16:41
【问题描述】：

我在服务器端渲染 React 组件：

1.components.js：

var React = require('react/addons');
var MonitorApp =  React.createClass({...});
module.exports = MonitorApp;

2.appFile/app.js

 var React = require('react/addons');
var ReactApp = require('../components');
var ReactDOM = require('react-dom');
var mountNode = document.getElementById("react-main-mount");

ReactDOM.render(new ReactApp({}), mountNode);

3.gruntFile.js

browserify: {
        dist: {
            files: {
                '<%= srcBase %>/assets/app.js': ['app/appFile/*.js']
            },
            options: {
                transform: ['reactify']
            }
        }
    }

4.html

<div id="react-main-mount">
    {{{reactOutput}}}
</div>

有这样的错误：

未捕获的错误：不变违规：ReactDOM.render()：无效的组件元素。这可能是由于无意中加载了两个独立的 React 副本造成的。

【问题讨论】：

试试ReactDOM.render(<ReactApp/>, mountNode);

标签： reactjs browserify

【解决方案1】：

您没有显示足够的代码。如果错误发生在客户端，您的 HTML 必须至少包含绑定 JS 的脚本标签，以便您的组件具有任何交互性。如果它发生在服务器端，那么您应该发布更多关于如何设置服务器的信息（即{{{reactOutput}}} 不是真正的 HTML，您使用的是模板系统还是什么？）

但我猜你得到的错误是客户端错误，并且你可能在 HTML (<script src=".../react.js">) 中包含了 React 库，而你当前的 gruntFile 正在让 Browserify 生成包含整个里面的反应库。所以这就是为什么错误说你有 2 个 React 副本。

如果是这种情况，您有 2 个选项来解决问题（仅选择一个）：

从您的 html 中删除 <script src=".../react.js">。

在您的 gruntFile.js 中使用 browserify's external option 将 React 从您的 JS 包中排除：

browserify: {
  dist: {
    ...
    options: {
      transform: ['reactify'],
      external: ['react/addons']
    }
  }
}

【讨论】：