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，但无法呈现它引用的组件。

我在我的Gemfile中包含了The Ruby Racer，并且已经通过向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和其他一些libs在这方面不起作用环境:(

我没有参考文件。

我可能做错了什么？

Answer 1

试试这个：

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

第一个哈希是空的 - 它是反应组件的空索引。

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

使用React Rails预渲染React组件

1 个答案: