多个 ReactDOM.render() 抛出错误 Target container is not a DOM element
Multiple ReactDOM.render() throwing error Target container is not a DOM element
尝试将 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().
谢谢!
首先,检查脚本是否找到第二个元素。你可以用这样的东西来检查它:
console.log(document.getElementById('activate-form'))
console.log(document.getElementById('edit-button'))
另外,检查页面上是否只有一个元素具有每个id。最后如果这个元素没有嵌套。
有时确保 DOM 元素存在是一个好习惯:
if ( document.getElementById('root') ) {
ReactDOM.render(<Foo />, document.getElementById('root'));
}
尝试将 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().
谢谢!
首先,检查脚本是否找到第二个元素。你可以用这样的东西来检查它:
console.log(document.getElementById('activate-form'))
console.log(document.getElementById('edit-button'))
另外,检查页面上是否只有一个元素具有每个id。最后如果这个元素没有嵌套。
有时确保 DOM 元素存在是一个好习惯:
if ( document.getElementById('root') ) {
ReactDOM.render(<Foo />, document.getElementById('root'));
}