Question

我有一个新网站，它不是单页应用程序，而是服务器呈现的网站（使用Umbraco CMS的ASP.NET）。我曾经在我的网站上使用过Angular 1.x，这很容易，因为您只需使用脚本标签将其加载，并且代码是未编译的。

我最近在SPA中一直使用React，从create-react-app开始，它会为您照顾webpack，babel等并生成一个捆绑包。但是，我想在网站的多个位置使用React，例如主标题/菜单，联系表格等，因此产生多个捆绑软件是有意义的，尽管这些捆绑软件可以共享导入（Moment.js，Formik等）。

React网站上有说明，显示了如何包括一个脚本并将其附加到您网站中的元素，但没有复杂的示例。

因此，我该如何设置可以在不复制捆绑代码的情况下转换所有内容的内容。我是否需要在所有页面上装入某种主捆绑软件，并需要单个捆绑软件来处理联系表格？

第二，如何连接所有内容？在SPA中，您只有一个根节点，并使用react-dom将您的应用程序绑定到该根节点，但是如果您的应用程序中散布了微型的React功能，那么您是否需要某种主脚本来将所有内容绑定到正确的元素？

任何帮助将不胜感激，即使它只是将我引向某种样板项目的方向。

哦，我对做服务器端渲染的Next JS应用或类似的东西不感兴趣，我认为与CMS集成可能太复杂了。

Answer 1

如果要在react应用程序的root元素“外部”呈现元素，则可以使用react Portals。我们也正在使用这种方法，并且进展顺利。

如果您仍然希望在同一页面上运行多个mini react应用程序，则可以在ReactDOM.render的帮助下与它们进行通信。基本上，ReactDOM.render可以被调用多次，它不会重新安装整个应用程序，而是触发更新并传播到反应树（与常规的render组件方法相同）。

实际上，我写了一篇有关如何Integrate React with other applications and frameworks的教程的文章。

我还尝试使用codesandbox example

模拟这种方法

希望有帮助。

Answer 2

我认为您可以制作一个捆绑包，将多个组件渲染到不同的位置。我创建了一个小例子：

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

Answer 3

除了以上答案外，您还可以从捆绑包中排除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>

如何在普通网站的多个地方使用React

3 个答案: