Rails 5.2 + ReactJS: простая проблема рендеринга

Question

Я использую учебник Фернандо Вильялобоса Rails + ReactJS и столкнулся с (надеюсь) простой проблемой рендеринга.

Я использую Rails 5.2.1 и само реактивный рельс v2.4.7.

Вот логика контроллера:

def index
  @records = Record.all
end

Вот вид:

<%= react_component "Records", { data: @records } %>

Вот код CoffeeScript:

  @Records = React.createClass
    render: ->
      React.DOM.div
        className: 'records'
        React.DOM.h2
          className: 'title'
          'Records'

На этом этапе урока пользователь должен увидеть div, тег H2 и «Записи».

Консоль разработчика Google подтверждает, что React вставил <div data-react-class="Records" data-react-props="..."></div> в HTML - но я не вижу никаких признаков <h2>Records</h2>. Там нет зарегистрированных ошибок или предупреждений. Я попытался использовать эквивалентный синтаксис JSX без изменений в результатах. Файл javascripts / application.js тоже выглядит правильно:

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require react
//= require react_ujs
//= require components
//= require_tree .

Чего мне не хватает?

Answer 1

Поскольку вы обработали <div data-react-class="Records" data-react-props="..."></div>, но не обработали, вы должным образом пропускаете либо настройку webpacker (если вы не используете sprockets), либо просто «тег пакета JavaScript».

Следовали ли вы инструкциям из раздела «Начало работы» для драгоценного камня react-rails? Смотри здесь

Краткая инструкция:

Добавить драгоценные камни

Добавьте webpacker и react-rails в свой гемфайл

Запуск инсталляторов

$ bundle install
$ rails webpacker:install
$ rails webpacker:install:react
$ rails generate react:install

Ссылка на пакет JavaScript

добавить <%= javascript_pack_tag 'application' %> к вашему виду

Создать компонент

этот шаг может быть необязательным (поскольку вы уже написали свой компонент)

rails g react:component my_subdirectory/HelloWorld greeting:string

Визуализация

<%= react_component("HelloWorld", { greeting: "Hello" }) %>

или в вашем случае, как вы сделали <%= react_component "Records", { data: @records } %>

На случай, если он не работает

Попробуйте рендеринг на стороне сервера, <%= react_component("Records", { data: @records }, {prerender: true}) %>

Запустите webpack-dev-server, чтобы увидеть, на что жаловаться: bin/webpack-dev-server