反应呈现错误ReactDOM.render（）：无效组分元素

我渲染阵营元器件在服务器端：反应呈现错误ReactDOM.render（）：无效组分元素

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副本。

来源

2015-11-05 user3387471

尝试'ReactDOM.render（，mountNode）;' –

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

但我想是客户端错误从您正在获取的错误，并且您可能在HTML中包含React库（<script src=".../react.js">），而当前的gruntFile使Browserify生成内部具有整个React库的JS文件。所以这就是为什么错误是说你有2份React。

如果是这样的话，你有2个选项来解决问题（只选一项）：

从HTML删除<script src=".../react.js">。

在你gruntFile.js使用browserify's external option排除从您的JS包阵营：

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

来源

2016-03-06 05:01:18

反应呈现错误ReactDOM.render（）：无效组分元素

回答

相关问题