使用React Rails预呈现React组件-Java 学习之路

我有一个简单的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文档，有三个要求：

Requirement 1

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

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

//= require_tree ./components

Requirement 2

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

我使用的是纯JavaScript

Requirement 3

您的代码无法引用文档 . Prerender进程无权访问文档，因此jQuery和其他一些库将无法在此环境中运行:(

我没有参考文件 .

What might I be doing wrong?

1 回答

1
试试这个：
```
<%= react_component 'TestComponent', {}, {prerender: true} %>
```
第一个哈希是空的 - 它是反应组件的空索引 .

第二个哈希是react-rails的选项，这就是你说'prerender：true'的地方 .
回复于 2024-04-20T11:03:19+08:00

使用React Rails预呈现React组件

1 回答

相关问题