多个ReactDOM.render（）抛出错误目标容器不是DOM元素

Question

尝试将React集成到非React项目中，因此我需要能够在多个元素上呈现react应用程序。

这里是index.js：

import React from 'react';
import ReactDOM from 'react-dom';

import Activation from './forms/Activation';
import EditButton from '../components/editButton';

ReactDOM.render(<EditButton></EditButton>, document.getElementById('edit-button'));
ReactDOM.render(<Activation></Activation>, document.getElementById('activate-form'));

我收到此error：

_registerComponent(...): Target container is not a DOM element.

第一个组件EditButton确实成功渲染，但第二个组件也无法渲染。如果我将Activation移到顶部，那么Activation将是唯一呈现的组件。

有没有人遇到过这个问题？任何建议或指示都将不胜感激。

编辑：

由于现有应用不是SPA，具体取决于用户所在的路线（＆＃39; /＆＃39;或＆＃39; / product＆＃39;等），指定的DOM元素为＆n存在。修复了使用getElementById的if语句，如果为true，则为ReactDOM.render（）。

谢谢！

Answer 1

首先，检查脚本是否找到第二个元素。您可以使用以下内容进行检查：

. ~/.bash_profile

另外，检查页面上是否只有一个元素存在。最后，如果这些元素没有嵌套。

Answer 2

有时最好确保DOM元素存在：

if ( document.getElementById('root') ) {

    ReactDOM.render(<Foo />, document.getElementById('root'));

}