在 React 布局中包装现有的 HTML 内容答案

【问题标题】：Wrap existing HTML content in a React layout在 React 布局中包装现有的 HTML 内容
【发布时间】：2022-09-24 05:32:06
【问题描述】：

我有一个复杂的应用程序，提供几乎所有来自 Django 模板的所有内容，这些模板在 React 启动时呈现服务器端并生成 HTML。

包括主要内容区域在内的所有内容都应该由我在 React with MUI 中完成的 JS 和 CSS 设置样式和定位。

这是一个典型的响应式、移动优先的应用程序菜单布局，侧边栏位于大视口上内容的左侧。这就是它在 HTML 中的样子。

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id=\"header\"><!-- Header generated in React --></div>
  <div>
      <div id=\"sidebar\"><!-- Sidebar generated in React --></div>
      <div id=\"main\">{{ HTML Content Passed Through }}</div>
  </div>
  <div id=\"footer\">{{ HTML Footer Passed Through }}</div>
</body>

一切都应该通过 MUI 组件库和样式系统在 JS 中使用 CSS 进行样式化。

\'create-react-app\' 生成的项目中的标准 index.html 只有一个根。以这种方式完成后，布局可以完美运行，因为 App.js 将各种组件拉到一起来呈现所有内容。

但是我还没有弄清楚如何保留和包装服务器渲染的内容与样式和定位。

如何包含现有的 HTML 内容，以便 react 控制所有内容的样式和定位？

如果我没有提供有用的细节，请提出澄清问题。谢谢你。

标签： reactjs django templates material-ui

【解决方案1】：

我无法在反应中找到这样做的方法。所以我用纯 css 做了布局，并添加了足够的 JS 来做一个滑动的左菜单。

然后可以加载 React 并分别附加到标题和侧边栏区域，而 django 内容块能够填充主要区域。

通过这种方式，javascript 不需要“留出空间”或“包装”来自 django 的 html。

【讨论】：