Rails-React 语法错误 JSX 未启用 - Ruby

问题描述

在 Rails 应用程序中使用 React 时，如果出现错误 JSX 未启用，这表示 Rails 不知道如何解释类似于下面这样的代码：

  {/* 这是 JSX 语法 */}
  <HelloWorld />

因此，需要用正确的方式启用 JSX 语法。

解决方法

检查文件扩展名

首先，检查文件扩展名是否正确。在使用 JSX 语法时，应该使用 .jsx 扩展名。如果是 .js 扩展名，则代码不会被正确解释。

例如，HelloWorld 组件应该声明在一个 .jsx 文件中：

// app/javascript/components/HelloWorld.jsx

import React from 'react';

const HelloWorld = () => <div>Hello World</div>;

export default HelloWorld;

安装依赖包

其次，需要在 Rails 应用程序中添加必要的依赖项。在这里，我们使用 babel-plugin-transform-react-jsx 和 babel-preset-react 来转换 JSX 语法。

首先，执行以下命令安装依赖项：

yarn add babel-plugin-transform-react-jsx babel-preset-react

然后，在项目根目录下创建一个 .babelrc 文件，并添加以下内容：

{
  "presets": ["react"],
  "plugins": [
    ["transform-react-jsx", { "pragma": "h" }]
  ]
}

以上配置将提示 Babel 将 JSX 转换过程中任何的 createElement 调用替换为 h。

如果您正在使用 Rails 5.1 或更高版本，则无需创建 .babelrc 文件。相反，您需要将上面的 presets 和 plugins 添加到 config/webpacker.yml 文件中的 babel 部分。

检查 webpack 配置

最后，请检查 webpack 配置并确保正确。在 Rails 5.1 或更高版本中，在 config/webpacker.yml 文件中，您应该有以下条目：

# config/webpacker.yml

development:
  <<: *default
  # ...
  babel:
    presets:
      - "react"
    plugins:
      - "transform-react-jsx"

test:
  <<: *default
  # ...
  babel:
    presets:
      - "react"
    plugins:
      - "transform-react-jsx"

production:
  <<: *default
  # ...
  babel:
    presets:
      - "react"
    plugins:
      - "transform-react-jsx"

在 Rails 5.0 中，您可能需要在 config/application.rb 文件中手动配置 webpack：

# config/application.rb

# 配置 webpacker
config.webpacker.compile { true }

# 将 babel 转换应用于 JavaScript 相关的文件
config.assets.js_compressor = :babel

重新启动 Rails

重启 Rails 应用程序以使更改生效：

bin/rails server

总结

在 Rails 应用程序中使用 JSX 时，需要确保文件扩展名正确，必要的依赖项已安装，webpack 配置已正确，重新启动 Rails 以使更改生效。