多个 ReactDOM.render() 抛出错误 Target container is not a DOM element

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，根据用户所在的路线（“/”或“/product”等），指定的 DOM 元素不存在。修复了仅使用 getElementById 的 if 语句，如果为真 ReactDOM.render().

谢谢！

Answer 1

首先，检查脚本是否找到第二个元素。你可以用这样的东西来检查它：

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

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

Answer 2

有时确保 DOM 元素存在是一个好习惯：

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

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

}

多个 ReactDOM.render() 抛出错误 Target container is not a DOM element

Multiple ReactDOM.render() throwing error Target container is not a DOM element

javascript

reactjs

react-dom