使用 react-rails gem 时反应组件不渲染答案

【问题标题】：React component not rendering when using react-rails gem使用 react-rails gem 时反应组件不渲染
【发布时间】：2019-07-27 19:22:51
【问题描述】：

我遵循react-rails 中的“Webpacker 入门”，但在运行 rails 服务器时，我没有看到 hello world 组件。

app/javascript/components/HelloWorld.js

import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
  render () {
    return (
      <React.Fragment>
        Greeting: {this.props.greeting}
      </React.Fragment>
    );
  }
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};
export default HelloWorld

views/layout/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>MyApp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

views/home/index.html.erb

<!DOCTYPE html>
    <html>
        <body>
            <p>Heloo</p>
            <%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
        </body>
    </html>

app/javascript/packs/application.js

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

console.log('Hello World from Webpacker')
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true)
var ReactRailsUJS = require("react_ujs")
ReactRailsUJS.useContext(componentRequireContext)

这是我尝试访问网页时得到的

编辑：在视图中添加 prerender: true （服务器端渲染），效果很好

<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }, prerender: true) %>

但为什么客户端渲染不起作用？

【问题讨论】：

您可以尝试在控制台中调用ReactRailsUJS.mountComponents 吗？让我知道它是否有效。
得到ReactRailsUJS is not defined
@barmic 我什至没有从 application.js 打印出“来自 Webpacker 的 Hello World”

标签： ruby-on-rails reactjs react-rails

【解决方案1】：

尝试添加

 <%= javascript_pack_tag 'application' %>

在您的 index.html.erb 中

【讨论】：

【解决方案2】：

此问题与您的视图设置方式有关。

您的视图正在呈现完整的 HTML 文档并忽略布局，因此 JavaScript 根本没有加载到页面上。这解释了为什么窗口上的所有内容都未定义。

在问题的屏幕截图中，您可以看到 HTML HEAD 为空。将视图替换为以下内容。

views/home/index.html.erb

<p>Heloo</p>
<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>

还可以通过在其中放置一些临时可见的内容来确保您的布局文件正确呈现。您可以暂时将视图内容放入模板中，以同时确保两件事！

希望这会有所帮助。

【讨论】：