我正在尝试设置一个 ASP.Net MV5 应用程序来使用ReactJS.Net http://reactjs.net,包括服务器端渲染和捆绑。
不幸的是,它因以下异常而失败:
React.dll 中发生“React.TinyIoC.TinyIoCResolutionException”类型的异常,但未在用户代码中处理
附加信息:无法解析类型:React.ReactEnvironment
此异常发生在这一行:
@Scripts.Render("~/bundles/ui-components")
这条线是我的_layouts.cshtml
file.
我应该如何解决我的问题?
为了提供详细信息,我做了什么:
-
在 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"));
我创建了一个文件夹“Content/ui/components”,其中包含所有 jsx 文件(实际上只有一个取自教程的“commentsbox.jsx”文件)。
-
在 ReactConfig.cs 中,我删除了WebActivatorEx.PreApplicationStartMethod
属性,因为我已经不再支持 MVC5,以利于 Owin 组件。剧照包含:
public static class ReactConfig
{
public static void Configure()
{
ReactSiteConfiguration.Configuration
.AddScript("~/content/ui/*.jsx");
}
}
-
In my Global.asax.cs
文件,我明确地调用ReactConfig.Configure
方法来替换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);
}
}
-
My _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()
-
我的一种观点是:
@{
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>
);
}
});
我终于找到了问题的根源。
事实上,该错误消息具有误导性。在ReactConfig.Configure
方法,通配符不起作用(即*.jsx
不起作用)。
我用这个替换了方法:
public static void Configure()
{
ReactSiteConfiguration.Configuration
.AddScript("~/content/ui/commentsbox.jsx").
.AddScript("~/content/ui/comment.jsx");
}
它解决了这个问题。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)