reactjs - react 渲染错误 ReactDOM.render() : Invalid component element

Question

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

1.components.js:

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

2.app文件/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>

有这样的错误:

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

Answer 1

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

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

如果是这种情况，您有 2 个选项来解决问题(仅选择一个):

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

在你的 gruntFile.js 中使用 browserify's external option从你的 JS 包中排除 React:

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