Использование React.js на нескольких страницах с Webpack - PullRequest
Новая
       8

Использование React.js на нескольких страницах с Webpack

0 голосов
/ 05 июля 2018

Основной вопрос: Как мне остановить эту ошибку: Uncaught Error: Target container is not a DOM element ПРИ использовании нескольких страниц с разными тегами элементов.

Это может быть что-то простое в структуре, которую я упустил при установке этих инструментов: React, JSX, Babel и Webpack. Я смотрел на все остальные связанные вопросы по stackoverflow и в других местах, но не видел этой точной ситуации.

React.js Page 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 Page 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, указывающие на теги элементов, которых нет на текущей странице HTML. Я довольно новичок в React.js & Webpack, поэтому я мог что-то упустить при форматировании кода. Мне просто нужно знать, как различать страницы, когда все JS объединены в один файл.

1 Ответ

0 голосов
/ 05 июля 2018

Более распространенной практикой является использование 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);
}
...