介绍

在 Rails 中使用 React 编写组件时，我们需要启用实验性语法 jsx 的支持。否则，当我们使用 jsx 语法时，会出现如下错误信息：

SyntaxError: mnt c myAppFile hello-rails-react app javascript components Greeting.js: 对实验性语法 'jsx' 的支持当前未启用 rails - Javascript

该错误提示告诉我们实验性语法 jsx 目前没有启用，因此我们不能在 Rails 中使用该语法。

如何启用 jsx 语法支持

要启用 jsx 语法的支持，我们需要引入支持该语法的编译器。

• 方案一：使用 babel 编译器

在 Gemfile 文件中添加如下代码：

gem 'babel-transpiler'

然后，在 config/initializers/babel.rb 文件中添加如下代码：

Rails.application.config.assets.configure do |env|
  env.register_transformer 'text/jsx', 'application/javascript', Babel::Transpiler
end

这样，我们就可以在 jsx 文件中使用类似以下的语法：

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}!</h1>
    );
  }
}

ReactDOM.render(
   <Greeting name="John" />,
   document.getElementById('root')
);

• 方案二：使用 react-rails gem

react-rails gem 自带 jsx 编译器，并且使用起来相对简单。

在 Gemfile 文件中添加如下代码：

gem 'react-rails'

然后，在我们的 jsx 文件中使用以下语法：

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}!</h1>
    );
  }
}

ReactDOM.render(
   <Greeting name="John" />,
   document.getElementById('root')
);

在 Rails Controller 中，我们可以渲染以上代码片段：

class GreetingsController < ApplicationController  
  def index
    render component: 'Greeting', props: {name: 'John'}
  end  
end

结论

在 Rails 中使用 React 编写组件时，我们需要启用实验性语法 jsx 的支持。

上述介绍了两种启用 jsx 语法的支持的方案，一是使用 babel 编译器，二是使用 react-rails gem。

无论哪种方案，我们都可以在 jsx 文件中使用类似以下的语法编写 React 组件：

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}!</h1>
    );
  }
}

ReactDOM.render(
   <Greeting name="John" />,
   document.getElementById('root')
);