如何使用 React.NET 的 React 插件

Question

我正在尝试在使用服务器端渲染和 React.NET 的项目中使用 React 插件组件 ReactCSSTransitionGroup。

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

Error while rendering "WorkOrderGeneralTab" to "react1": Script threw an exception: 'ReactCSSTransitionGroup' is undefined. Line: 0 Column:0

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

这是我在其他地方所做的可能相关的事情

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="example"。

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

提前致谢！

Answer 1

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

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

在使用代码之前的某处。

如何使用 React.NET 的 React 插件

How to use react addons with React.NET

.net

add-on

reactjs