Rails - 未定义 React答案

【问题标题】：Rails - React is not definedRails - 未定义 React
【发布时间】：2016-02-11 20:05:46
【问题描述】：

首先，这不是重复的！这是相同的“未定义”错误，但完全遵循 github (https://github.com/reactjs/react-rails) 指南，但仍然无法正常工作

宝石文件：

gem 'rails'
gem 'pg', '~> 0.15'
gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'
gem 'therubyracer'
gem 'bootstrap-sass'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'font-awesome-sass'
gem 'sprockets-rails'
gem 'react-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc

application.js：

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap-sprockets
//= require react
//= require react_ujs
//= require components

application.html：

<!DOCTYPE html>
<html>
<head>
  <title>project</title>
  <%= stylesheet_link_tag 'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= javascript_include_tag 'react' %>
  <%= csrf_meta_tags %>
</head>
<body>

组件/app.js.jsx：

// var React = window.ReactRailsUJS;

var Hello = React.createClass({
    render: function() {
        return (
            <p>Hello</p>
        );
    }
});

ReactDOM.render(
    <Hello />,
    document.getElementById("react-msg")
);

console.log(1);

html 文件：

<style type="text/css">
  h1, h3 {
    font-weight: bold;
  }
</style>

<div class="container">
  <h1>React JS</h1>
  <h3 id="react-msg"></h3>
</div>

开发.rb：

Rails.application.configure do
...

# config/environments/development.rb
config.react.variant = :development

# to include react add-ons
config.react.addons = true # defaults to false

end

当我访问它显示的页面时

ReferenceError: React is not defined

我做错了什么？

如果我取消以下注释

var React = window.ReactRailsUJS;

它说 createClass 不是一个函数，并且对于所有其他 React 函数都是一样的

【问题讨论】：

你重启服务器了吗？
是的，还是不行。我在其他项目的 Cloud9 上尝试了同样的事情，所以它也不是“项目错误”
猜测你的浏览器在你调用它的时候没有意识到反应
您是否在布局中包含了您的application.js？
@Drew 是对的。 javascript_include_tag 'application' 应该在 javascript_include_tag 'react' 行之后

标签： ruby-on-rails reactjs undefined react-rails

【解决方案1】：

对于遇到此问题并在这里登陆的任何人，显然这是从 React 16 版开始的问题。原因是 React.createClass 已被弃用。相反，您应该使用createReactClass。

许多（现在很旧的）文档都提供了这样的示例：

var HelloMessage = React.createClass({
  render: function() {
    return (
      <h1>Hello {this.props.name}!</h1>
    )
  }
});

相反，你应该使用这个：

var HelloMessage = createReactClass({
  render: function() {
    return (
      <h1>Hello {this.props.name}!</h1>
    )
  }
});

我只能假设他们没有更新他们的示例，截至 2017 年 11 月，当您搜索 react-rails 时，其中许多仍然出现。

【讨论】：