代码之家 › 专栏 › 技术社区 › Steve B

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

reactjs.net tinyioc reactjs inversion-of-control asp.net-mvc-5

Steve B · 技术社区 · 11 年前

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

不幸的是,它失败了,出现了以下异常:

React.dll中发生“React.TinyIoC.TinyIoCResolutionException”类型的异常,但未在用户代码中处理

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

此异常发生在以下行:

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

这条线是我的 _layouts.cshtml 文件

我该如何解决问题?

为了提供详细信息,这里是我所做的:

在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”(实际上只有一个“commentsbox.jsx”文件取自教程)。

在ReactConfig.cs中,我删除了 WebActivatorEx.PreApplicationStartMethod 属性,因为我认为MVC5不再支持这一点,这是Owin组件的利润。它仍然包含:

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

在我的 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);
    }
}

我的 _布局.shtml 视图包含(位于文件底部):

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

我认为:

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

<div id="content"></div>      

@section scripts
{
    @Html.React("CommentBox", new {}, containerId:"content")        
}

最后,我的jsx文件:

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

        </div>
    );
  }
});

1 回复 | 直到 11 年前

Steve B 11 年前

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

实际上,错误信息是误导性的。在里面 ReactConfig.Configure 方法,通配符不起作用(即。 *.jsx 不工作)。

我将该方法替换为:

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

它解决了这个问题。