Как использовать React в нескольких местах на обычном веб-сайте

Если вы хотите отображать элементы «вне» вашего элемента root приложения реакции, вы можете использовать реагировать порталы. Мы тоже используем этот подход, и все идет хорошо.

Если вы все еще думаете, что хотите, чтобы на одной странице работало несколько приложений mini response, вы можете общаться с ними с помощью ReactDOM.render. По сути, ReactDOM.render можно вызывать несколько раз, он не будет повторно монтировать все приложение, а вместо этого будет запускать обновления и различать дерево реакции (так же, как обычный метод компонентов render).

Фактически, я написал статью с учебником о том, как Интегрируйте React с другими приложениями и фреймворками.

Я также попытался смоделировать этот подход с помощью codeandbox пример

Надеюсь, это поможет.

Я думаю, вы можете сделать один пакет, отображая несколько компонентов в разных местах. Я создал небольшой пример:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className = "App">
      <h1>Body</h1>
    </div>
  );
}

function Footer() {
  return (
    <div className = "App">
      <h1>Footer</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

const footerElement = document.getElementById("footer");
ReactDOM.render(<Footer />, footerElement);

Вы можете поиграть с ним в этом примере песочницы. https://codesandbox.io/s/34nvv4nvy5

В дополнение к приведенному выше ответу вы можете исключить React, ReactDOM и / или React Router (и любые другие зависимости) из своих пакетов и включить их на страницу, чтобы вы не объединяли их X раз. Таким образом, у вас могут быть отдельные файлы ввода для каждого приложения.

webpack.config.js

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
}

index.html

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js" integrity = "sha256-JBRLQT7aJ4mVO0H2HRhGghv/K76c5WzE57wW0Flc6ZY = " crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/cjs/react-dom.production.min.js" integrity = "sha256-j2ERTIovDFVe0R+s0etuSiBQ2uxrNE6q0ow/rXxHvLA = " crossorigin = "anonymous"></script>