是否可以使用 ReactJS.Net 在服务器端渲染 jQuery？答案

【问题标题】：Is it possible to server-side render jQuery with ReactJS.Net?是否可以使用 ReactJS.Net 在服务器端渲染 jQuery？
【发布时间】：2023-12-05 08:04:01
【问题描述】：

我在ReactJS.NET 上浏览了this tutorial，但遇到了障碍。它提到：

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

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

加载“~/Scripts/jquery-1.10.2.js”时出错：ReferenceError: window is not defined

【问题讨论】：

为什么要在服务器上使用像 jQuery 这样的客户端 dom 库？我错过了什么吗？
我不知道......但我不确定如何解耦它。我想我想通了……测试我的理论。
SignalR 的未来版本将删除 jQuery 依赖项，这将使其更易于重用。 github.com/SignalR/SignalR/issues/372
除非您提交拉取请求，否则我不会屏住呼吸@DanielLoNigro。那个问题是从 2012 年开始的
@daniellmb 最后我听说他们正在为将成为 ASP.NET 5 一部分的 SignalR 版本进行开发。该问题已关闭，因为他们将其移至 aspnet 下的存储库Github 组织。

标签： javascript jquery asp.net reactjs reactjs.net

【解决方案1】：

得到它的工作（live demo），我只需要将调用移动到 jsx 文件之外的React.render 并传递我需要的内容（参见下面的 sn-p）。另一种选择是尝试使用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>
}

【讨论】：

【解决方案2】：

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

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

像这样：

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

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

这里是 reactjs.net 作者自己的一些额外的 cmets。基本上，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>

【讨论】：