Question

我目前正在尝试使用＆＃39; ReactJS.NET＆＃39;在服务器端渲染一些ReactJS-stuff（来自不同的教程）。

但是，我总是收到以下消息：

找不到名为＆＃39; CommentBox＆＃39;的组件。您是否忘记将其添加到App_Start \ ReactConfig.cs？

查看代码here，这似乎很简单。

我的ReactConfig.cs：

public static class ReactConfig
{
    public static void Configure()
    {
        ReactSiteConfiguration.Configuration
            .AddScript("~/Scripts/dist/CommentBox.js");
    }
}

我无法看到我在这里做错了什么，因为我认为我只需要将（通过webpack）生成CommentBox.js添加到配置并完成。

在我的视图中，我只是尝试调用@Html.React("CommentBox",new {})，此时抛出异常。

这是可以在生成的javascript文件中找到的代码：

var CommentBox = (function (_super) {
    __extends(CommentBox, _super);
    function CommentBox() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    CommentBox.prototype.render = function () {
        return __WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("div", { className: "commentBox" },
            __WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("h1", null, "Comment-Box"),
            __WEBPACK_IMPORTED_MODULE_0_react__["createElement"](CommentForm, null),
            __WEBPACK_IMPORTED_MODULE_0_react__["createElement"](CommentList, null));
    };
    return CommentBox;
}(__WEBPACK_IMPORTED_MODULE_0_react__["Component"]));

Answer 1

我认为您可以尝试调用它@Html.React（＆＃34; Components.CommentBox＆＃34;，new {}）。我认为，就像暴露者以这种方式工作一样。我现在正在尝试同样的事情并且也得到这个错误。这有助于我，但更多的错误：）

Answer 2

我正在使用Webpack 2.2.1，我以这种方式解决了这个问题。首先在对象中公开我的组件，然后我结束这个

expose const CommentBox;

之后，在webapck配置文件中，我有类似的东西

{
   entry: '/path/to/CommentBox.js',
   output: {
      library: ['MyComponents'],
      libraryTarget: 'this'
   }
}

这样，webpack将在全局对象上公开（你正在运行V8，所以节点env），对象MyComponents.CommentBox

Answer 3

如果您将Webpack与ReactJS.NET一起使用，则需要公开公开组件，以便ReactJS.NET可以访问它们。请参阅此处的指南：https://reactjs.net/guides/webpack.html

Answer 4

我发现我需要引用组件的完整命名空间路径。例如，在我的情况下，ResourceAttributesComponent命名空间中的组件名称为Portal.Scheduling，因此我必须编写@Html.React("Portal.Scheduling.ResourceAttributesComponent", new {})

Answer 5

就我而言，我在组件中缺少 default 关键字：导出默认函数Test（）{...} https://github.com/reactjs/React.NET/issues/835#issuecomment-502616611

使用ReactJS.NET

5 个答案: