使用ReactJS.Net可以在服务器端渲染jQuery吗？

Question

我在this tutorial上经历了ReactJS.NET，遇到了障碍。它提到：

  

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

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

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

Answer 1

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

Answer 2

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

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

像这样：

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

它也在其他一些地方工作，但不是到处都有。在React脚本中的其他地方，我得到了“ReferenceError：$未定义”。

这是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>