MVC5 上的 ReactJS.Net 无法解决依赖关系

Question

我正在尝试设置一个 ASP.Net MV5 应用程序以使用 ReactJS.Net，包括服务器端渲染和捆绑。

不幸的是，它失败并出现以下异常：

React.dll 中出现“React.TinyIoC.TinyIoCResolutionException”类型的异常，但未在用户代码中处理

附加信息：无法解析类型：React.ReactEnvironment

此异常发生在这一行：

 @Scripts.Render("~/bundles/ui-components")

这一行是我的_layouts.cshtml 文件。

我应该如何解决我的问题？

---

为了详细说明，这里我做了什么：

1. 在 BundleConfig.cs 中：

       bundles.Add(new ScriptBundle("~/bundles/reactjs").Include(
                   "~/Scripts/react/react-{version}.js"));
       bundles.Add(new JsxBundle("~/bundles/ui-components")
                   .Include("~/content/ui/components/*.jsx"));
   

   我用我所有的 jsx 文件创建了一个文件夹“Content/ui/components”（实际上只有一个来自教程的“cmetsbox.jsx”文件。

2. 在 ReactConfig.cs 中，我删除了 WebActivatorEx.PreApplicationStartMethod 属性，因为 MVC5 不再支持这个属性，这是 Owin 组件的好处。它仍然包含：

   public static class ReactConfig
   {
       public static void Configure()
       {
           ReactSiteConfiguration.Configuration
               .AddScript("~/content/ui/*.jsx");
       }
   }
   

3. 在我的Global.asax.cs 文件中，我显式调用ReactConfig.Configure 方法来替换WebActivatorEx.PreApplicationStartMethod 挂钩：

   public class MvcApplication : System.Web.HttpApplication
   {
       protected void Application_Start()
       {
           ReactConfig.Configure();
           AreaRegistration.RegisterAllAreas();
           FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
           RouteConfig.RegisterRoutes(RouteTable.Routes);
           BundleConfig.RegisterBundles(BundleTable.Bundles);
       }
   }
   

4. 我的_layouts.cshtml 视图包含（在文件底部）：

   @Scripts.Render("~/bundles/jquery")
   @Scripts.Render("~/bundles/bootstrap")
   @Scripts.Render("~/bundles/reactjs")
   @Scripts.Render("~/bundles/ui-components")
   @RenderSection("scripts", required: false)
   @Html.ReactInitJavaScript()
   

5. 在我看来：

   @{
       ViewBag.Title = "Home Page";
   }
   
   <div id="content"></div>      
   
   @section scripts
   {
       @Html.React("CommentBox", new {}, containerId:"content")        
   }
   

6. 最后，我的 jsx 文件：

   var CommentBox = React.createClass({
     render: function() {
       return (
           <div class="row">
               <div class="col-md-4">
               hello
               </div>
   
           </div>
       );
     }
   });
   

Answer 1

我终于找到了问题的根源。

实际上，错误消息具有误导性。在ReactConfig.Configure 方法中，通配符不起作用（即*.jsx 不起作用）。

我用这个替换了方法：

public static void Configure()
{
    ReactSiteConfiguration.Configuration
        .AddScript("~/content/ui/commentsbox.jsx").
        .AddScript("~/content/ui/comment.jsx");
}

它解决了这个问题。