反应未定义

2024-02-14

我刚刚开始玩反应宝石 https://github.com/reactjs/react-rails但我似乎遇到了问题。使用下面的代码,每当我路由到 React 示例页面时,我注意到浏览器开发人员控制台中会显示“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'

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

尝试切换你的 JS 包含:

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

反应未定义 的相关文章

随机推荐

  • 如何使用 django-rest-framework 测试客户端测试二进制文件上传?

    我有一个 Django 应用程序 其视图接受要上传的文件 使用 Django REST 框架 我对 APIView 进行子类化并实现 post 方法 如下所示 class FileUpload APIView permission clas
  • 如何在 Neo4j 中使用类型层次结构?

    Neo4j 中是否有某种方法可以对类型层次结构进行建模 例如 如果我想构建汽车的类层次结构 我可能有一个 Car 基类型 然后有扩展它的子类 例如 SportCar 等 我希望能够创建 SportCar 的实例 但运行查询来获取所有 Car
  • 在 Cassandra 中存储上次触摸时间的最佳方式

    我将最后一次触摸的时间存储在 Postgres 的 User 表中 但是有许多频繁的更新和足够的争用 我可以看到 3 个相同更新死锁的示例 Cassandra 似乎更适合这个目的 但我应该专门用一个表来实现这个目的吗 我不需要旧的时间戳 只
  • Java 编译器会预先计算文字的总和吗?

    int i 10 20 编译器是否真的会处理这段代码 添加10 20 并且字节码与这行代码相同 int i 30 我在哪里可以读到相关内容 是的 您甚至可以亲自验证 以一个小的 Java 文件为例 public class Main pub
  • 如何从 jenkins Powershell 脚本更新环境变量

    您好尝试从阶段编写的 Powershell 脚本更新 jenkins Env 变量 pipeline agent label master environment def var1 default value def var2 defaul
  • “抄送”c++ istream?

    对于我自己的小解析器框架 我试图定义 类似 以下函数 template
  • AES 实施速度

    我已经编写了 AES 的 C 实现 并尝试使其尽可能快 我刚刚开始编程并接受 IT 培训 到目前为止 我已经实现了约 600 的速度提升 但仍然非常慢 为了将我的 AES 实现与我在 Linux 终端中使用的 openssl speed 命
  • 如何在 Material UI 中布局表单?

    我正在尝试使用 MaterialUI Grid 组件和字段构建以下表单布局 Form Field 1 Field 2 TextArea
  • 从 Angular JS 表单发布数据时出错

    我有一个 angularJS 表单 它将数据发布到 scalatra servlet 提交表单后 我无法在 scalatra servlet 中获取任何表单参数 下面是我的代码 AngularJS scope createUser func
  • 使用 JavaScript 隐藏网格项

    我有一个 2 x 2 CSS 网格 每个网格项都简要描述了一项服务 小型企业网站 每个网格项都有一个按钮来了解有关所述服务的更多信息 当用户单击四个按钮之一以了解更多信息时 我希望该网格项展开以占据整个 2x2 网格 我已经在工作 并且其他
  • 尝试从联合中提取类型时出现类型错误

    我正在尝试将类型定义添加到一些使用通过网络工作人员传递消息的代码中 调度的消息有一个字符串类型的成员 可以在运行时使用它来区分它们 One type of Message export interface IOpenFileWMsg typ
  • 选择随机种子并保存

    我想选择一个随机种子numpy random并将其保存到变量中 我可以使用设置种子numpy random seed seed None 但是你如何让 numpy 选择一个随机种子并告诉你它是什么 号码好像用过 dev urandom默认情
  • Hibernate setMaxResult 对父集合也限制子集合

    我有一个带有 ManyToMany fetch FetchType EAGER 子集合的父实体 我只需要加载我找到的父实体的第一条记录 因此我使用以下标准加载它 session createCriteria Parent class set
  • 套件构建过程中出现异常如何解决?

    我已按照以下步骤测试我的应用程序 我已经创建了 Android 项目 我已经为我的示例应用程序和测试应用程序创建了调试签名 需要测试 将sampleapp debug apk放在bin文件夹中 我的工作区在那里 在模拟器中安装了 testa
  • 如何禁用ant design日期选择器中的所有星期日和特定日期数组

    以下代码禁用了包括今天在内的所有先前日期 但我想禁用 ant design 日期选择器中的所有星期日和特定日期数组 lt DatePicker size large format DD MM YYYY nChange this onDate
  • 如何在 Eloquent ORM Laravel 中删除“updated_at”同时保留“created_at”

    在 Laravel 中 我有一个仅创建但未更新的模型 所以 我只想删除updated at场地 但是created at字段为必填项 那么我怎样才能只删除updated at场 同时保持created at field 在您的模型中添加以下
  • 使用自动映射器映射异步结果

    我们正在创建 angularjs 应用程序的 Web Api 应用程序 Web Api 返回 json 结果 第一步是获取数据 public List
  • WSL,使用“wsl --exec ”或“wsl -- ”运行 linux 命令

    wsl h显示以下内容 exec e
  • “创建新的 Android 虚拟设备 (AVD)”对话框中的“确定”按钮不执行任何操作

    尝试通过以下步骤从 eclipse 环境创建 AVD 单击 Windows Android 虚拟设备管理器 这将打开 Android 虚拟设备管理器 对话框 在对话框中 单击 新建 这将打开 创建新的 Android 虚拟设备 AVD 对话
  • 反应未定义

    我刚刚开始玩反应宝石 https github com reactjs react rails但我似乎遇到了问题 使用下面的代码 每当我路由到 React 示例页面时 我注意到浏览器开发人员控制台中会显示 React 未定义 它指的是这一行