Question

主要问题：如何停止该错误：Uncaught Error: Target container is not a DOM element使用多个带有不同元素标签的页面。

这可能是我在安装以下工具时忽略的结构中的一些简单内容：React，JSX，Babel和Webpack。我查看了关于stackoverflow和其他地方的所有其他相关问题，但没有看到这种确切情况。

React.js第1页示例：

import Navbar from '../../Common/Navbar';
import Info from './Info';
import Activity from './Activity';
import Activities from './Activities';

// Render Navbar
ReactDOM.render(<Navbar/>, document.querySelector('.navbar'));

// Render information
ReactDOM.render(<Info/>, document.querySelector('.left-panel'));

// Render activity
ReactDOM.render(<Activity/>, document.querySelector('.activity-panel'));

// Render activities
ReactDOM.render(<Activities/>, document.querySelector('.activities'));

HTML Page 1示例：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"></nav>
<div class="container">

  <div class="left-panel"></div>

  <div class="activity-panel"></div>

  <div class="activities"></div>

</div>

React.js第2页示例：

import Navbar from '../../Common/Navbar';
import Info from './Info';
import Activity from './Activity';
import Activities from './Activities';

// Render Navbar
ReactDOM.render(<Navbar/>, document.querySelector('.navbar'));

// Render information
ReactDOM.render(<Main/>, document.querySelector('.main-page'));

HTML Page 2示例：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"></nav>
<div class="container">

  <div class="main-page"></div>

</div>

更多信息：

我知道发生这种情况是因为bundle.js文件包含React元素，这些React元素指向不在当前HTML页面上的元素标签。我对React.js和Webpack还是很陌生，所以我可能会错过有关格式化代码的知识。我只需要知道当JS全部捆绑到一个文件中时如何区分页面。

Answer 1

更常见的做法是仅将ReactDOM.render用作整个React组件树的根，但是如果您想这样做，可以检查document.querySelector调用是否确实找到了DOM节点是否在渲染之前。

import Navbar from '../../Common/Navbar';
import Info from './Info';
import Activity from './Activity';
import Activities from './Activities';
import Main from './Main';

// Render Navbar
const navbar = document.querySelector('.navbar');
if (navbar) {
  ReactDOM.render(<Navbar/>, navbar);
}

// Render information
const leftPanel = document.querySelector('.left-panel');
if (leftPanel) {
  ReactDOM.render(<Info/>, leftPanel);
}

// Render activity
const activityPanel = document.querySelector('.activity-panel');
if (activityPanel) {
  ReactDOM.render(<Activity/>, activityPanel);
}

// Render activities
const activities = document.querySelector('.activities');
if (activities)
  ReactDOM.render(<Activities/>, activities);
}

// Render information
const mainPage = document.querySelector('.main-page');
if (mainPage) {
  ReactDOM.render(<Main/>, mainPage);
}

使用Webpack在多个页面上使用React.js

1 个答案: