Я пытаюсь настроить приложение ASP.Net MV5 для работы с ReactJS.Net, включая рендеринг и объединение на стороне сервера.
К сожалению, это не удается с этим исключением:
Исключение типа «React.TinyIoC.TinyIoCResolutionException» возникло в React.dll, но не было обработано в пользовательском коде.
Дополнительная информация: невозможно определить тип: 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"));
Я создал папку «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"); } }
В моем файле
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); } }
Мое представление
_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> ); } });