Facebook React.js :: 为客户端渲染传递数据

Posted 2023-02-22

【中文标题】Facebook React.js :: 为客户端渲染传递数据

【英文标题】：Facebook React.js :: Pass data for Client Side rendering

【发布时间】：2015-07-12 18:47:27

【问题描述】：

我正在尝试使用 React.js 创建我的第一个 Web 应用程序。

我希望 React 执行客户端渲染，但是渲染的页面由服务器托管数据库中保存的数据控制。

我应该如何将这些数据传递给 React？

我是否必须用我的数据的 json 表示预先填充服务器端的每个 html 页面？

或者 React 可以直接从客户端访问我的数据库（或使用 RESTful API 调用）？

更新：001

我能找到的所有示例都在 node.js 上安装了 REACT.js。 我可以在 Apache Tomcat™、IBM Websphere Liberty Profile、Jetty 上使用 REACT.js 吗？

【问题讨论】：

您可以将其嵌入到页面中或使用 ajax 调用，以更适合您的方式。

【参考方案1】：

您提到的两种方法都可以工作，this blog post 给出了 服务器端 渲染和在渲染的 HTML 中嵌入 props 的示例。

编辑：

针对您的编辑，我想说 React 是一个 javascript 框架，它自然应该部署在一个 javascript 服务器上，例如 Node。如果您不想使用 Node，那么您肯定可以编写使用 AJAX 从 API 服务器请求数据的仅限客户端的脚本。 Here is a great example from Facebook.

它的一个sn-p：

componentDidMount: function() 
  $.get(this.props.source, function(result) 
    var lastGist = result[0];
    if (this.isMounted()) 
      this.setState(
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      );
    
  .bind(this));

一旦组件被挂载，上面的代码就会使用来自服务器的数据填充state 对象。

【讨论】：

Ben，第一次加载数据怎么样（没有 Ajax 调用）？我不确定如何让它与 JSX 编译一起使用......

是的，使用 <script> 标签将数据作为编码的 JSON 字符串直接嵌入到 html 中。然后在 React 中，获取该标签的内容并将其转换回 JavaScript 对象。