Javascript Multiple ReactDOM.render（）引发错误的目标容器不是DOM元素

尝试将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'));

第一个组件，

EditButton

，确实成功渲染，但第二个组件也无法渲染。如果我将

Activation

移动到顶部，则

Activation

将是唯一呈现的组件

有人碰到过这个问题吗？如有任何建议或指示，将不胜感激

编辑：

由于现有应用程序不是SPA，根据用户所在的路径（“/”或“/product”等），指定的DOM元素不存在。修复了使用getElementById的if语句和if true ReactDOM.render（）的错误

---

谢谢

首先，检查脚本是否找到第二个元素。您可以通过以下方式进行检查：

console.log(document.getElementById('activate-form'))
console.log(document.getElementById('edit-button'))

---

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

首先，检查脚本是否找到第二个元素。您可以通过以下方式进行检查：

console.log(document.getElementById('activate-form'))
console.log(document.getElementById('edit-button'))

---

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

确保DOM元素存在有时是一种好的做法：

if（document.getElementById（'root'））{
ReactDOM.render（，document.getElementById（'root'））；
}

有时，确保DOM元素存在是一种很好的做法：

if（document.getElementById（'root'））{
ReactDOM.render（，document.getElementById（'root'））；
}

因此第二个日志将返回null。两个id中只有一个元素。不太清楚“如果此元素未嵌套”是什么意思。这两个元素都嵌套在多个div中。@我的意思是元素不能相互嵌套。如果第二个日志返回null，那么您应该在html中找到问题。可能是id中的错误字符，可能是未关闭的html标记或其他内容。您还可以在浏览器开发工具中检查html结构。第二个元素应该存在于第一个组件之后。谢谢提示。问题在于，根据用户在“/”或“/product”等路径上的不同，dom元素并不像您建议的那样存在。来自非SPA应用程序的react，不认为这是可能的。因此第二个日志将返回null。两个id中只有一个元素。不太清楚“如果此元素未嵌套”是什么意思。这两个元素都嵌套在多个div中。@我的意思是元素不能相互嵌套。如果第二个日志返回null，那么您应该在html中找到问题。可能是id中的错误字符，可能是未关闭的html标记或其他内容。您还可以在浏览器开发工具中检查html结构。第二个元素应该存在于第一个组件之后。谢谢提示。问题在于，根据用户在“/”或“/product”等路径上的不同，dom元素并不像您建议的那样存在。来自非SPA应用程序的react，不认为这是可能的。