是否可以使用 ReactJS.Net 在服务器端呈现 jQuery？

Question

我一直在经历 this tutorial on ReactJS.NET，但遇到了障碍。它提到：

We will use simple polling here but you could easily use SignalR or other technologies.

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

加载“~/Scripts/jquery-1.10.2.js”时出错：参考错误：window 未定义

Answer 1

成功了（live demo), I just needed to move the call to React.render outside of the jsx file and pass in what I needed (see snippet below). Another option would be to try and mock the expected objects with 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: $ 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>

是否可以使用 ReactJS.Net 在服务器端呈现 jQuery？

Is it possible to server-side render jQuery with ReactJS.Net?

javascript

asp.net

jquery

reactjs

reactjs.net