在另一个 HTML 页面中嵌入 React-Redux SPA .NET Core 模板答案

【问题标题】：Embedding React-Redux SPA .NET Core template inside Another HTML page在另一个 HTML 页面中嵌入 React-Redux SPA .NET Core 模板
【发布时间】：2018-05-22 01:58:33
【问题描述】：

我使用 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>

在浏览器中运行这个页面会说initialReduxState 是undefined。

那么在不需要 MVC Razor 视图的情况下，将 React 组件及其相关脚本轻松嵌入另一个页面的最佳实践是什么？

谢谢！

【问题讨论】：

标签： reactjs asp.net-core visual-studio-2017 react-redux asp.net-core-2.0

【解决方案1】：

事实证明服务器端预渲染正在启动initialReduxState，在这种情况下（简单的HTML页面），服务器端预渲染不起作用，所有像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 }};

【讨论】：