3

我正在尝试让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>
    )
  }
}

然后我在我的观点中引用了以下行：

= 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，但如果它是相对于当前文件的，那么它指向componentsand not似乎很奇怪../components，但是改变它并不会呈现组件。但是，如果我添加以下行，我可以获得组件渲染：

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

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

4

1 回答 1

2

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

于 2017-04-28T21:20:07.767 回答