Оберните содержимое шаблона Django в макет React

Я привык создавать одностраничные приложения. Но для текущего проекта у меня есть сложное приложение, обслуживающее почти все из шаблонов django.

В настоящее время нет возможности перестроить весь контент на основе django в SPA с доступом к API. Этот проект предназначен только для замены заголовка и добавления боковой панели, которая выдвигается при нажатии на иконку "гамбургер" или когда размер медиа становится достаточно мал.

Это типичный отзывчивый, ориентированный на мобильные устройства, макет меню приложения с боковой панелью слева от содержимого на больших экранах просмотра. При разработке макет работает так, как задумано. Но в "главную" область контента не помещается серверный рендеринг контента.

Вот как я бы построил макет в HTML, если бы не использовал react. В настоящее время это не работает, потому что если я рендерю компоненты по отдельности, они не имеют общего контекста для реагирования на изменение области просмотра и события.

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="header"><!-- React --></div>
  <div>
      <div id="sidebar"><!-- React --></div>
      <div id="main">{{ Django Content Here }}</div>
  </div>
  <div id="footer">{{ Django Footer Here }}</div>
</body>

Если я следую стандартной конвенции, макет работает, потому что App.js объединяет различные компоненты для рендеринга полного HTML. Но это не позволяет обернуть содержимое сервера.

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

Как я могу включить содержимое из django так, чтобы react все еще контролировал позиционирование всего, но не переопределял содержимое шаблона django?

Пожалуйста, задавайте уточняющие вопросы, если я не включил полезные детали. Спасибо.

Я не смог найти способ сделать это в react. Поэтому я сделал макет на чистом css и добавил достаточно JS, чтобы сделать скользящее левое меню.

ЗатемReact можно было загрузить и прикрепить к области заголовка и боковой панели по отдельности, в то время как блок контента django мог заполнить основную область.

Таким образом, не было необходимости в том, чтобы javascript "оставлял место" или "оборачивал" html, который поступал из django.

Вернуться на верх