时间戳

首页 > 解决方案 > 通过 Webpack 在多个页面上使用 React.js

html - 通过 Webpack 在多个页面上使用 React.js

问题描述

主要问题：如何停止此错误：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 第 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 页面 2 示例：

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

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

</div>

更多信息：

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

标签： htmlreactjswebpackbabeljs

解决方案

更常见的做法是只使用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);
}

推荐阅读