将React-Redux SPA .NET Core模板嵌入到另一个HTML页面中

Question

我使用Visual Studio 2017的React-Redux SPA模板创建了一个新项目

现在，在index.cshtml中添加了“ react-app” div。 如果我想在另一个应用程序（简单的HTML页面）中再次重用相同的<div>并重用相关的脚本，该怎么办？ 这是test.html页面上的内容

剧本

<base href="" />
<link rel="stylesheet" href="dist/vendor.css" asp-append-version="true" />
<link rel="stylesheet" href="dist/site.css" asp-append-version="true" />
<script type="text/javascript" src="dist/vendor.js" asp-append-version="true"></script>
<script type="text/javascript" src="dist/main-client.js" asp-append-version="true"></script>

身体

<div id="react-app" asp-prerender-module="ClientApp/dist/main-server"  data-content="{&quot;formID&quot;:7}">Loading...</div>

在浏览器中运行此页面表示undefined initialReduxState 。

那么什么是最佳的实践，可以轻松地将React组件及其相关脚本嵌入到另一个页面中而不需要MVC Razor视图？

谢谢！

Answer 1

事实证明，服务器端预渲染正在启动initialReduxState ，在这种情况下（简单的HTML页面），服务器端预渲染不起作用，并且所有Tag Helper（如asp-prerender-module都无用，应将其删除。

为了使main-client.js文件起作用，我修改了boot-client.ts文件

从

const initialState = (window as any).initialReduxState as ApplicationState;

至

const initialState = (window as any).initialReduxState as ApplicationState || { form: {}, routing: { location: null }};