ReactJS.Net上MVC5未能解决的依赖 [英] ReactJS.Net on MVC5 fails to resolve dependency

问题描述

我想建立一个ASP.Net应用MV5与 ReactJS.Net 工作，包括服务器端渲染和捆绑。

不幸的是，它失败与此异常：

  

类型的异常React.TinyIoC.TinyIoCResolutionException发生在React.dll但在用户code没有处理

  
  

其他信息：无法解析类型：React.ReactEnvironment

在这条线会发生此异常：

  @ Scripts.Render（〜/包/ UI组件）
 

此行​​是采取我的 _layouts.cshtml 文件。

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

---

要给出详细信息，在这里我做了什么：

1. 在BundleConfig.cs：

     bundles.Add（新ScriptBundle（〜/包/ reactjs）。包括（
                   〜/脚本/反应/ react- {}版本的.js））;
       bundles.Add（新JsxBundle（〜/包/ UI组件）
                   .INCLUDE（〜/内容/ UI /组件/ * JSX））;
    

   我创建的文件夹内容/ UI /组件用我所有的JSX文件（实际上只有一个commentsbox.jsx从教程采取文件。<​​/ p>




2. 在ReactConfig.cs，我删除了 WebActivatorEx。preApplicationStartMethod 属性，因为我这是没有更多的MVC5的支持下，在利润Owin组件。它剧照包括：

    公共静态类ReactConfig
   {
       公共静态无效配置（）
       {
           ReactSiteConfiguration.Configuration
               .AddScript（〜/内容/ UI / * JSX。）;
       }
   }
    




3. 在我的的Global.asax.cs 文件，我明确地调用 ReactConfig.Configure 方法来替代。在 WebActivatorEx preApplicationStartMethod 挂钩：

    公共类MvcApplication：System.Web.HttpApplication
   {
       保护无效的Application_Start（）
       {
           ReactConfig.Configure（）;
           AreaRegistration.RegisterAllAreas（）;
           FilterConfig.RegisterGlobalFilters（GlobalFilters.Filters）;
           RouteConfig.RegisterRoutes（RouteTable.Routes）;
           BundleConfig.RegisterBundles（BundleTable.Bundles）;
       }
   }
    




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

     @ Scripts.Render（〜/包/ jQuery的）
   @ Scripts.Render（〜/包/引导）
   @ Scripts.Render（〜/包/ reactjs）
   @ Scripts.Render（〜/包/ UI组件）
   @RenderSection（脚本，必需：false）
   @ Html.ReactInitJavaScript（）
    




5. 在我的观点之一：

     @ {
       ViewBag.Title =主页;
   }＆LT; D​​IV ID =内容＆GT;＆LT; / DIV＆GT;@section脚本
   {
       @ Html.React（CommentBox，新的{}，containerId：内容）
   }
    




6. 最后，我的JSX文件：

     VAR CommentBox = React.createClass（{
     渲染：功能（）{
       返回（
           ＆LT; D​​IV CLASS =行＆GT;
               ＆LT; D​​IV CLASS =COL-MD-4＆GT;
               你好
               ＆LT; / DIV＆GT;        ＆LT; / DIV＆GT;
       ）;
     }
   }）;
    

解决方案

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

其实，错误消息是误导。在 ReactConfig.Configure 方法，通配符不工作（即 *。JSX 不工作）。

我更换了方法，这样的：

 公共静态无效配置（）
{
    ReactSiteConfiguration.Configuration
        .AddScript（〜/内容/ UI / commentsbox.jsx）。
        .AddScript（〜/内容/ UI / comment.jsx）;
}
 

和它解决了问题。

I'm trying to set up an ASP.Net MV5 application to work with ReactJS.Net, including server side rendering and bundling.

Unfortunately, it fails with this exception:

An exception of type 'React.TinyIoC.TinyIoCResolutionException' occurred in React.dll but was not handled in user code

Additional information: Unable to resolve type: React.ReactEnvironment

This exception occurs on this line:

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

This line is taken my _layouts.cshtml file.

How should I solve my issue?

---

To give of details, here what I've done:

1. in 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"));
   

   I created a folder "Content/ui/components" with all my jsx files (actually only one "commentsbox.jsx" file taken from the tutorial.

2. In ReactConfig.cs, I removed the WebActivatorEx.PreApplicationStartMethod attribute, because I've this is no more supported with MVC5, in profit of Owin component. It stills contains :

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

3. In my Global.asax.cs file, I explicitly call ReactConfig.Configure method to replace the WebActivatorEx.PreApplicationStartMethod hook:

   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. My _layouts.cshtml view contains (at the bottom of the file):

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

5. In one of my view:

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

6. And finally, my jsx file:

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

解决方案

I finally found the source of my problem.

Actually, the error message was misleading. In ReactConfig.Configure method, wildcard does not works (i.e. *.jsx does not works).

I replaced the method with this:

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

and it solved the issue.

这篇关于ReactJS.Net上MVC5未能解决的依赖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！