Question

我正在尝试使用我的Rails 4.2.4应用程序中的react-rails gem（版本2.1）。我已经完成了自述文件中的设置步骤，我正在使用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>
    )
  }
}

然后我在我的视图中使用以下行引用它：

= 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然后反应就像“哦，好吧，Label实际上是label.js”。它做的东西。 TLDR资本化很重要。

未定义React Rails组件

1 个答案: