javascript - 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_role.es6.jsx 的 app/javascripts/components 文件，其中包含:

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 附加组件进行 react 时，我可以看到 olark 消息传递插件使用的 react ，但没有别的。 egghead 教程至少呈现了“你好”文本。

当我使用 chrome 检查器查看控制台选项卡时，我收到一条错误消息，指出未定义应用程序 Angular 色:

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 而不是 View 窗口中的 App_Role 时，我开始工作了。