使用 React Rails 预渲染 React 组件

Question

我有一个简单的 React 组件，它当前在客户端上正确呈现。我试图让它在服务器上呈现。为了测试这一点，我关闭了 Chrome 中的 JavaScript 并加载了页面。

我的组件如下所示：

window.TestComponent = React.createClass({
  render: function() {
      return React.DOM.h1({className: 'TestComponent'},
        'Test Component')
  }
});

入口点如下所示：

<%= react_component 'TestComponent', {prerender: true} %>

目前，页面加载正常，包含以下内容：

<div data-react-class="TestComponent" data-react-props="{'prerender': true}"></div>

Rails 似乎在解析 erb，但无法渲染它引用的组件。

我已将 The Ruby Racer 包含在我的 Gemfile 中，并通过将一些计算打印到 DOM 来验证它是否正常工作。

根据关于服务器端渲染的 React Rails 文档有三个要求：

要求 1

react-rails 必须加载您的代码。按照惯例，它使用 components.js， 这是由安装任务创建的。此文件必须包含您的 组件及其依赖项（例如，Underscore.js）。

我的组件位于：app/assets/javascripts/components/test_component.js.erb 并且应该由 components.js 中的 JavaScript 加载：

//= require_tree ./components

要求 2

您的组件必须可在全局范围内访问。如果你是 使用 .js.jsx.coffee 文件然后需要使用包装函数 考虑：

我使用的是纯 JavaScript

要求 3

您的代码无法引用文档。预渲染进程没有 访问文档，因此 jQuery 和其他一些库在此不起作用 环境：（

我不参考文档。

我可能做错了什么？

Answer 1

试试这个：

<%= react_component 'TestComponent', {}, {prerender: true} %>

第一个 hash 是空的 - 它是 react 组件的空 paras。

第二个哈希是 react-rails 的选项，这就是你说'prerender：true'的地方。