React未定义

时间:2014-07-26 18:58:55

标签: javascript ruby-on-rails ruby reactjs

我刚开始玩react gem,但我似乎遇到了问题。使用下面的代码,每当我被路由到我的反应示例页面时,我注意到在浏览器开发者控制台中,它会说" React未定义。"它指的是这一行:

var react_example = React.createClass({

位于 react_example.js.jsx 文件中(见下文)。

的Gemfile

#... as well as other gems...
gem 'nokogiri'
gem 'react-rails' #<------ React
gem 'less-rails'
gem 'therubyracer'
gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'

development.rb

config.react.variant = :development
config.react.addons = true

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>React example</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag "react" %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

react_example.js.jsx

/** @jsx React.DOM */

var react_example = React.createClass({
  render: function () {
    return (
      <div>
        <h5>React</h5>
      </div>
    );
  }
});

2 个答案:

答案 0 :(得分:2)

尝试切换你的JS包括:

<%= javascript_include_tag "react" %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

由于您在应用程序JS中使用React,因此需要先定义它。

答案 1 :(得分:1)

这实际上并不是最好的方法,除非你真的想加载与你的应用程序不同的反应。

文档明确说明您应该在application.js清单文件中执行此操作:

sprintf

提及&#34;组件&#34;取决于您实际放置反应组件文件的文件夹。