Rails 5 - React.js 入门

Question

我正在尝试学习如何在我的 Rails 5 应用中使用 react.js。

我已经安装了 react-rails gem。

我已经使用生成器创建了我的第一个组件，如下所示：

rails generate react:component AppRole title:string display_name:string category:integer --es6

这在 app/javascripts/components 中给了我一个名为 app_role.es6.jsx 的文件，其中包含：

class AppRole extends React.Component {
  render () {
    return (
      <div>
        <div>Title: {this.props.title}</div>
        <div>Display Name: {this.props.displayName}</div>
        <div>Category: {this.props.category}</div>
      </div>
    );
  }
}

AppRole.propTypes = {
  title: React.PropTypes.string,
  displayName: React.PropTypes.string,
  category: React.PropTypes.node
};

我观看了this egghead.io 入门视频（以及购买了 Arkency 的 react with rails 书籍并阅读了this 教程。

我没有使用 air pair 教程，因为我正在尝试学习 es6。我在使用 Arkency 书籍时遇到了困难，因为没有完整的示例，而且我迷失在书籍假定知识的空白中。

但是，即使 Egghead 的入门视频也不适合我。我按照他们的结构，尝试渲染索引页面，它有：

<p><%= react_component('App_Role', title: 'hello') %></p>

呈现一个空白的白色页面。当我检查它时，我可以看到：

<div data-react-class="App_Role" data-react-props="{&quot;title&quot;:&quot;hello&quot;}"></div>

当我使用 chrome 插件进行反应时，我可以看到 olark 消息插件使用的反应，但没有别的。 Egghead 教程至少会呈现 'hello' 文本。

当我使用 chrome 检查器查看控制台选项卡时，我收到一条错误消息，提示未定义应用角色：

VM4231:1 Uncaught ReferenceError: App_Role is not defined(anonymous function) @ VM4231:1getConstructor @ react_ujs_mount.self-5293119….js?body=1:58mountComponents @ react_ujs_mount.self-5293119….js?body=1:77(anonymous function) @ react_ujs_turbolinks.self-19cb50a….js?body=1:5dispatch @ jquery.self-bd7ddd3….js?body=1:5227elemData.handle @ jquery.self-bd7ddd3….js?body=1:4879t.dispatch @ turbolinks.self-c5acd7a….js?body=1:6t.Controller.r.notifyApplicationAfterPageLoad @ turbolinks.self-c5acd7a….js?body=1:6t.Controller.r.pageLoaded @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6

谁能看到我做错了什么？

Answer 1

当我意识到在视图窗口中它应该是 AppRole 而不是 App_Role 时，我得到了这个工作。