Question

我正在尝试在使用服务器端呈现和React.NET的项目中使用react addon组件ReactCSSTransitionGroup。

每当我在视图中调用@ Html.React（）来启动服务器端渲染时，我都会遇到以下异常。

渲染时出错＆＃34; WorkOrderGeneralTab＆＃34; to＆＃34; react1＆＃34;：脚本扔了例外：＆＃39; ReactCSSTransitionGroup＆＃39;未定义。行：0列：0

如何让react.net服务器端渲染器识别反应插件的定义，如CSSTransitionGroup？

以下是我在其他地方可能相关的内容

react-with-addons.js（v0.13.1）正在捆绑并发送到客户端，以及我们自己的jsx文件。

以下是我的ReactConfig.cs

中的内容

ReactSiteConfiguration.Configuration
            .AddScript("~/Scripts/react-with-addons.js")
            .AddScript("~/Features/WorkOrder/_Notes.jsx")
            .AddScript("~/Features/WorkOrder/_General.jsx");

这是抛出异常

的服务器端代码（在.cshtml文件中）

@Html.React("WorkOrderGeneralTab", new
{
    workOrder = Model,
    tabName = "General",
    softCloseUrl = @Url.Action("SoftClose"),
    reopenUrl = @Url.Action("Reopen"),
    userPermissions = new { 
        softClose = @Html.UserHas(Permission.WorkOrderSoftClose),
        reopen = @Html.UserHas(Permission.WorkOrderReopen)
    }
})

最后，这是抛出异常的组件。该组件由WorkOrderGeneralTab的渲染函数实例化和渲染。

var WOGeneralActionButtons = React.createClass({displayName: 'WOGeneralActionButtons',
  render: function() {
    var closeOrReopenBtn;
    // logic that chooses close vs reopen button... 

    var CopyDeleteButtons = <WOCopyDeleteButtons/>;
    var ExportPrintButtons = <WOExportPrintButtons/>;
    return (
          <div className="col-md-6 text-right">
            <ReactCSSTransitionGroup transitionName="example">
              {closeOrReopenBtn}
            </ReactCSSTransitionGroup>
            {CopyDeleteButtons}
            {ExportPrintButtons}
          </div>
    );
  }
});

我还定义了一些css来支持transitionName =＆＃34;示例＆＃34;。

为了让服务器端渲染器将ReactCSSTransitionGroup识别为有效组件，我缺少什么？如果我删除了ReactCSSTransitionGroup标记，其他所有内容都按原样工作（保持过渡动画）。

提前谢谢！

Answer 1

由于您尚未发布所有代码，因此可能不正确。但ReactCSSTransitionGroup不是全局变量，它位于React.addons对象上。所以你需要这个：

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

在使用之前，代码中的某处。

如何使用React.NET反应插件

1 个答案: