Prerendering React Components with React Rails

Question

У меня есть простой компонент React, который в настоящее время правильно отображается на клиенте. Я пытаюсь сделать это на сервере. Чтобы проверить это, я отключу JavaScript в Chrome и загрузив страницу.

Мой компонент выглядит следующим образом:

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

EntryPoint выглядит следующим образом:

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

На данный момент, страница загружается без ошибок и содержит следующее:

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

Кажется, что Rails анализирует erb, но не отображает компонент, который он ссылается.

Я включил Ruby Racer в свой Gemfile и проверил его работу, распечатав некоторые вычисления в DOM.

Согласно документации Реагировать Rails на стороне сервера визуализации есть три требования:

Требование 1

срабатывают-рельсы должны загрузить свой код. По соглашению он использует components.js, , который был создан задачей установки. Этот файл должен содержать ваши компоненты и их зависимости (например, Underscore.js).

Мой компонент находится в: приложение/активов/JavaScripts/компонентов/test_component.js.erb и должен быть загружен в JavaScript components.js:

//= require_tree ./components 

Требование 2

Ваши компоненты должны быть доступны в глобальном масштабе. Если вы с помощью .js.jsx.coffee файлов, то функция упаковщик необходимо принимать во внимание :

Я использую обычный JavaScript

Требование 3

Ваш код не может ссылаться на документ. Пререндер процессы не имеют доступа к документу, так JQuery и некоторые другие ЛИЭСЫ не будут работать в этой среде :(

Я не ссылаться на документ.

Что могу я делать неправильно?

Answer 1

Попробуйте это:

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

Первый хэш пуст - это пустые пункты для среагировать компонента.

Второй хэш - это варианты для релейных рельсов, вот где вы говорите «prerender: true».