2

我一直在阅读ReactJS.NET上的本教程，但遇到了障碍。它提到：

我们将在这里使用简单的轮询，但您可以轻松地使用 SignalR 或其他技术。

虽然这在我进行客户端渲染时有效，但在渲染服务器端时会引发以下错误。目前，我实际上并不需要jQuery 或 SignalR 来呈现初始状态，因为我只是在应用程序运行后使用它们来订阅更新。我想我的问题是，构建我的 React 应用程序以便我可以随意在服务器端或客户端呈现它的正确方法是什么。

React.dll 中发生了“React.Exceptions.ReactScriptLoadException”类型的异常，但未在用户代码中处理

加载“~/Scripts/jquery-1.10.2.js”时出错：ReferenceError：未定义窗口

4

2 回答 2

1

让它工作（现场演示），我只需要将调用移动到React.renderjsx 文件之外并传递我需要的内容（参见下面的片段）。另一种选择是尝试使用jsdom模拟预期的对象。

<!-- Render the React Component Server-Side -->
@Html.React("CommentBox", new
{
  data = Model,
  conn = false
})

<!-- Optionally Render the React Component Client-Side -->
@section scripts {
  <script src="~/Scripts/react/react-0.12.2.js"></script>
  @Scripts.Render("~/bundles/comments")
  <script>
    React.render(React.createElement(CommentBox, {
      data: @Html.Raw(Json.Encode(Model)),
      conn: $.hubConnection()
    }), document.getElementById("react1"));
  </script>
}
于 2015-02-12T21:20:40.723 回答
1

在使用 reactjs.net 渲染服务器端时使用 jQuery：

如果您使用上面的设置将 jQuery 放在 React 的 ComponentDidMount 函数中，答案是部分肯定的。

像这样：

componentDidMount: function(){
    if (this.props.userID == 0){
        $("#postButton").hide();
    }
}

它也适用于其他一些地方，但并非无处不在。在 React 脚本的其他地方，我得到“ReferenceError: $ is not defined”。

这是 reactjs.net 作者自己的一些补充评论。基本上，jQuery 不是为在服务器端工作而设计的，所以最好不要依赖它。

https://groups.google.com/forum/#!topic/reactjs/3y8gfgqJNq4

作为替代方案，例如，如果您想在不使用 jQuery 的情况下控制元素的可见性，您可以创建一个样式，然后根据 If 逻辑分配该样式。然后将样式作为内联属性添加到元素中，如下所示。这在 React 中应该可以正常工作。

var styleComment = {display: 'block'};

if (this.props.commentCount == 0){
    styleComment = {display: 'none'}
}

<div style={styleComment}>Count is greater than 0</div>
于 2016-08-14T04:17:17.517 回答