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

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

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

因此,我该如何设置可以转换所有内容而不复制捆绑中的代码的东西。我是否需要在所有页面上加载某种主捆绑包,并需要单个捆绑包来进行联系表格之类的事情?

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

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

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

最佳答案

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

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

09-30 14:45
查看更多