react-rails视图未正确显示

Question

我正在使用react-rails在我的Rails项目中使用React.js。Rails 4.2.8

这是我的assets/javascripts/application.js的样子

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap/modal
//= require react_ujs
//= require turbolinks

我使用HAMl查看并导入组件，如下所示：

= react_component('HelloWorld', name: 'John', prerender: true)

当我查看PageSource时，我可以看到如下所示：

    <div data-react-class="HelloWorld" data-react-props="{&quot;name&quot;:&quot;John&quot;,
&quot;prerender&quot;:true}"></div>

但是视图上什么都没有，我在控制台上看到了这个错误消息：

Uncaught ReferenceError: HelloWorld is not defined
    at eval (eval at module.exports (react_ujs.self-eb4e9994228856e343ab49d1aed6c23046bf4308ea6d46395e5c39170ab3e56f.js?body=1:95), <anonymous>:1:1)
    at Object.module.exports [as getConstructor] (react_ujs.self-eb4e9994228856e343ab49d1aed6c23046bf4308ea6d46395e5c39170ab3e56f.js?body=1:95)
    at Object.mountComponents (react_ujs.self-eb4e9994228856e343ab49d1aed6c23046bf4308ea6d46395e5c39170ab3e56f.js?body=1:303)
    at HTMLDocument.ReactRailsUJS.handleMount (react_ujs.self-eb4e9994228856e343ab49d1aed6c23046bf4308ea6d46395e5c39170ab3e56f.js?body=1:350)

组件文件app/JavaScripts/components/HelloWorld.js

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

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

我做错了什么？是因为我没有//= require components吗？即使在这种情况下，我也得到了一个错误。

Answer 1

将HelloWorld.js从app/JavaScripts/components迁移到app/assets/javascripts/components，看看这是否有帮助。