jsx似乎无法正确转换

Question

我在Rails（4.2.7）项目中使用react-rails gem。这是我对默认Gemfile进行的唯一修改：

gem 'react-rails'

我使用es6语法在.jsx文件中定义了一个组件：

class Foo extends React.Component {
  render () {
    return (<h1>hello</h1>)
  }
}

这很好用，但是当我尝试导入js模块时，出现错误：

import ReactTransitionGroup from 'react-addons-transition-group'
class Foo extends React.Component {
  render () {
    return (<h1>hello</h1>)
  }
}

  

foo.es6.self-69f3a42 ... .js？body = 1：11 Uncaught ReferenceError：require未定义

在我看来，如果我没有正确地发现jsx，那么我会在第一种情况下出错，但我不是。在我尝试使用import之前，我一整天都在使用jsx而没有任何问题。

我尝试将以下内容添加到我的Gemfile中：

gem 'sprockets-es6'
gem 'babel-transpiler'

我已尝试将其添加到config / environments / development.rb：

config.react.jsx_transformer_class = React::JSX::BabelTransformer

我尝试使用带有--es6标志的rails react组件生成器生成组件：

rails g react:component Foo --es6

我错过了什么？

Answer 1

所以这就是我如何解决我的问题：因为我正在使用'react-rails'宝石，可以通过配置选项添加插件 - 我在config / application.rb中添加了以下内容：

config.react.addons = true

然后在我的.jsx文件中，而不是import，这是我以前访问ReactTransitionGroup的语法：

var ReactTransitionGroup = React.addons.ReactTransitionGroup

我仍然不明白，但也许有一天我会，为什么import语句转换为require未定义，以及如何通过定义{{1}以外的任何其他方法来解决}，或转换为已定义的内容。