【问题标题】:React is not defined反应未定义
【发布时间】:2014-09-18 09:57:26
【问题描述】:

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

var react_example = React.createClass({

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

宝石文件

#... 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>
    );
  }
});

【问题讨论】:

    标签: javascript ruby-on-rails ruby reactjs


    【解决方案1】:

    尝试切换你的 JS 包括:

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

    由于你在你的应用JS中使用了React,所以需要先定义它。

    【讨论】:

    • 这似乎可以解决问题,但现在我的 html 实际上并没有呈现我的反应组件。 React 以及我的脚本都已加载,但我的页面上没有显示任何内容。
    • 您需要在某个地方调用React.renderComponent 或Rails 视图助手render_component。有关详细信息,请参阅 React 教程和 react-rails README。
    【解决方案2】:

    这实际上不是最好的方法,除非你真的想在你的应用程序之外加载 react。

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

    //= require react
    //= require react_ujs
    //= require components
    

    提及“组件”的行取决于您实际放置 React 组件文件的文件夹。

    【讨论】:

      猜你喜欢
      • 2018-07-06
      • 1970-01-01
      • 2021-09-20
      • 2018-05-20
      • 2019-04-27
      • 2017-12-21
      • 1970-01-01
      • 1970-01-01
      • 2023-03-31
      相关资源
      最近更新 更多