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

Question

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

我最近一直在 SPA 中使用 React，从 create-react-app 开始，它为您管理 webpack、babel 等并生成一个包。但是，我想在网站的多个位置使用 React，例如主标题/菜单、联系表单等，因此生成多个 bundle 很有意义，尽管这些 bundle 可能共享导入(Moment.js、Formik 等)。

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

那么，我该如何着手设置一些东西来转译所有内容，而无需在 bundle 中复制代码。我是否需要在所有页面上加载某种主包，并需要单独的包来处理联系表格之类的东西？

其次，如何连接所有东西？在 SPA 中，你只有一个根节点，并使用 react-dom 将你的应用程序绑定(bind)到根节点，但是如果你的应用程序中散布着一些小的 React 功能，那么你是否需要某种主脚本来将所有内容绑定(bind)到正确的元素？

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

哦，我对做服务器端呈现的 Next JS 应用程序或类似的东西不感兴趣，我认为这可能会变得太复杂而无法与 CMS 集成。

Answer 1

我认为你可以制作一个包，将多个组件渲染到不同的地方。我创建了一个小例子:

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