Блог

Главная - Вопросы по программированию - Рендеринг ReactJS ReactDOM для отдельных страниц

Рендеринг ReactJS ReactDOM для отдельных страниц

#reactjs

#reactjs

Вопрос:

Я нахожусь в процессе переноса своих страниц с html и jquery на использование React, и я знаю, что React Router и Redux — это методы для обработки маршрутизации при создании приложения react, но на данный момент мне было интересно, как я могу изменить свои настройки, чтобы иметь возможность отображать разные компоненты react для разных страниц. На данный момент я могу рендерить один компонент react при загрузке моей индексной страницы, но я подумал, что мог бы добавить другой ReactDOM.render() под ним и настроить другой идентификатор div для компонента на другой странице, но я заметил ошибку, Invariant Violation: Target container is not a DOM element . Связано ли это с тем, что не используется маршрутизатор react или что-то еще?

вот мой index.js :

 import React from 'react';
import ReactDOM from 'react-dom';
import ActivityFeed from './components/App/ActivityFeed/ActivityFeed';
import CreateAnnotation from './components/App/Annotation/CreateAnnotation';


ReactDOM.render(<ActivityFeed />, document.getElementById('annotation-card'));
ReactDOM.render(<CreateAnnotation />, document.getElementById('annotation-form'));

Вот <CreateAnnotation/> :
импортируйте React из ‘react’;

 //GET /api/activity-feed and set to state

    export default class CreateAnnotation extends React.Component {
        constructor(props, context) {
            super(props, context);
            this.state = this.context.data || window.__INITIAL_STATE__ || {
                notifications: [],
                reportLinks: [],
                files: []
            }
        }

        render() {  
            return (
                <div>
                    <p>test</p>
                </div>
            )
        }

    }

Вот файл просмотра:

 <!DOCTYPE html>
<head>
    {{> app/app-head}}
</head>
<body>
    <div id="annotation-form"></div>
    {{> general/bundle-js}}
</body>
</html>

{{> general/bundle-js}} :

 <script src="/bundle.js"></script>

Ответ №1:

 ReactDOM renders a React element into the DOM in the supplied container 
and return a reference to the component (or returns null for stateless 
components). If the React element was previously rendered into 
container , this will perform an update on it and only mutate the DOM 
as necessary to reflect the latest React element.

Технически говоря, вы не можете рендерить более одного элемента React в DOM с помощью нескольких функций рендеринга ReactDOM, поскольку это всегда заменяло бы предыдущий рендеринг DOM.

Смотрите https://reactjs.org/docs/react-dom.html

Правильный способ сделать это — создать несколько компонентов и импортировать их в App.js файл. Затем ваш index.js предполагается, что файл импортируется App.js файл как единый компонент, с рендерингом только ReactDOM App.js как единый компонент.

Комментарии:

1. Спасибо за ответ и подробности. Это недостаток понимания деталей DOM, но если бы я ориентировался на разные теги контейнера div, как показано в index.js теге, которые существовали только на независимых страницах, разве это не был бы один рендеринг ReactDOM для каждого DOM? Или DOM хранит информацию по страницам? Кроме того, не могли бы вы подробнее рассказать о создании нескольких компонентов и импортировать их в app.js . То есть вы хотите сказать, что импортируете компоненты в мой серверный файл, а затем импортируете сервер в мой react index.js файл?

2. Хорошо, не могли бы вы подробнее объяснить, что вы подразумеваете под targeting different container div tags as shown in the index.js tag that only existed on independent pages ?