使用ReactJS.NET进行组件的服务器端呈现失败

Question

我目前正在尝试使用"ReactJS.NET"在服务器端渲染一些ReactJS内容(来自不同的教程)。

然而，我总是收到以下信息：

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

看看这里的代码，它似乎很直接。

我的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("Components.CommentBox"，new｛｝)。我认为，曝光者是这样工作的。我现在正在尝试同样的事情，但也出现了这个错误。这对我有帮助，但更多的错误进一步：)

Answer 2

我使用的是Webpack 2.2.1，我用这种方式解决了这个问题。首先，将我的组件暴露在一个对象中，然后我完成这个

expose const CommentBox;

之后，在webapck配置文件中，我有这样的

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

通过这种方式，webpack将在全局对象(您正在运行V8，因此node-env)上公开对象MyComponents.CommentBox

Answer 3

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

Answer 4

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

Answer 5

在我的例子中，我的组件中缺少default关键字：export-default function Test()｛…｝https://github.com/reactjs/React.NET/issues/835#issuecomment-502616611