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对rails book的反应并阅读了this教程。

我没有使用空对教程，因为我试图学习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教程至少提供了“你好”的教训。文本。

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

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时，我得到了这个工作。

Rails 5 - 开始使用React.js

1 个答案: