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>

但View上没有任何内容，我在控制台上看到此错误消息：

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，看看是否有帮助。

react-rails视图未正确显示

1 个答案: