asp.net - 使用 Asp.net MVC4 配置 React，在浏览器中出现 Failed to load resource[app.jsx] 之类的错误

Question

索引.cshtml

@{
  ViewBag.Title = "Home Page";
 }

<div id="content"></div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
<script src="~/Scripts/react/react.min.js"></script>
<script src="@Url.Content("~/Scripts/app/app.jsx")"></script>

应用程序.jsx

var HelloWorld = React.createClass({
    render: function () {
        return (
            <div>Hello World!!</div>
        );
}
});

在浏览器中出现错误，例如

加载资源失败：服务器响应状态为 500（内部服务器错误）

Answer 1

通过以下步骤解决了此问题，

1）确保安装了 React.Web.Mvc4 包，它在 NuGet 管理器中命名为 ReactJS.NET

2) 从 NuGet 管理器安装以下包，

 JavaScriptEngineSwitcher.V8
 JavaScriptEngineSwitcher.V8.Native.win-x64
 JavaScriptEngineSwitcher.V8.Native.win-x86 

3）在App_Start目录中更新一个文件ReactConfig.cs

    public static void Configure()
    {
        JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
        JsEngineSwitcher.Current.EngineFactories.AddV8();
    }

4）清理，构建解决方案。

Answer 2

首先，您的代码似乎没问题。

您可以查看在浏览器上显示错误 500 的 url。本地主机/.../.jsx

你可能有这样的事情

如果您查看https://reactjs.net/getting-started/aspnet.html

在您的项目中，您必须拥有 reactconfig.cs

你需要像图片中那样配置

而已。

Answer 3

尝试使用 babel 或 web 编译器（从 VS 扩展安装）将您的.jsx文件转换为并从视图中引用这些文件。.js另外，删除第二个react库：

<script src="~/Scripts/react/react.min.js"></script>

Answer 4

通过将此添加到 Startup.cs 中的 ConfigureServices 解决：

services.AddJsEngineSwitcher(options => 
     {
           options.DefaultEngineName = V8JsEngine.EngineName;
           options.EngineFactories.AddV8();
     }
);