ruby-on-rails - 未定义 React Rails 组件

Question

我正在尝试获取 react-rails gem (版本 2.1)在我的 Rails 4.2.4 应用程序中工作。我已经完成了自述文件中的设置步骤，并且我正在使用 webpacker 进行 js 预处理。我在 app/javascript/components/label.js 中有一个组件，如下所示:

import React, {PureComponent} from 'react';
import ReactDOM from 'react-dom'

export default class Label extends PureComponent {

  render () {
    return (
      <div>Something rendered in React</div>
    )
  }
}

然后我在我的 View 中使用以下行引用它:

= react_component("Label")

据我从自述文件中可以看出，这应该是渲染组件所必需的(假设应用程序包包含在布局中，它是)

= javascript_pack_tag 'application'

所以我很困惑为什么我在浏览器中收到组件未定义的错误。

Uncaught ReferenceError: Label is not defined

打开 app/javascript/packs/application.js 我可以看到以下内容:

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)

首先，我确认控制台日志显示在浏览器中(确实如此)。我不确定 componentRequireContext 做了什么，但如果它是相对于当前文件的，那么它指向 components 而不是 ../components，但更改它不会呈现组件。但是，如果我添加以下行，我可以获得组件渲染:

window.Label = require('../components/label.js');

如果组件保存在 app/javascript/components 目录中，我认为 React Rails gem 可以解决这个问题？自述文件中没有任何内容表明我需要显式声明和要求该组件，还是我弄错了？

Answer 1

您似乎遇到了大写问题。您将文件命名为 'label.js' 但您正在寻找 '= react_component("Label")' 所以它看起来并没有找到 Label 是什么。然后，当您在窗口上设置 Label 时， react 就像“哦，好的，Label 实际上是 label.js”。它确实有用。 TLDR 资本化很重要。