Rails 5.2 + ReactJS：简单的渲染问题

Question

我正在使用Fernando Villalobos的Rails + ReactJS tutorial，并且遇到了（希望）简单的渲染问题。

我正在使用Rails 5.2.1和react-rails gem 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 Developer's Console确认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 pack标签”。

您是否遵循react-rails宝石的“入门”部分中的说明？参见here

简短说明：

添加宝石

将webpacker和react-rails添加到您的gemfile

运行安装程序

$ 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