如何无需包裹元素直接返回多个JSX元素？React配置探究

核心思路：通过Babel编译阶段自动添加Fragment #

React的JSX语法最终会被Babel转译为JavaScript代码，要实现自动包裹多根JSX元素，核心是在Babel转译过程中修改AST，自动为相邻JSX元素添加Fragment包裹。以下是两种可行方案：

方案1：使用第三方Babel插件快速实现 #

直接借助现成的babel-plugin-react-auto-fragment插件，它能自动识别返回多个相邻JSX元素的场景，自动包裹为<></>（短语法Fragment）。

步骤：

1. 安装插件：

npm install babel-plugin-react-auto-fragment --save-dev

2. 修改Babel配置文件（如.babelrc或babel.config.json）：

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "react-auto-fragment",
    ["@babel/plugin-transform-react-jsx", { "runtime": "automatic" }]
  ]
}

配置完成后，你的示例代码会被自动转译为：

function CustomBtn() {
  return (
    <>
      <h1>CustomBtn</h1>
      <h1>CustomBtn</h1>
    </>
  )
}

方案2：自定义Babel插件实现个性化处理 #

如果需要更灵活的逻辑，可以自己编写简易的Babel插件，遍历AST并修改返回语句中的多JSX元素节点。

示例插件代码：

module.exports = function({ types: t }) {
  return {
    visitor: {
      ReturnStatement(path) {
        const argument = path.get('argument');
        // 筛选出返回语句中的所有JSX元素/Fragment节点
        const jsxNodes = argument.container.filter(node => 
          t.isJSXElement(node) || t.isJSXFragment(node)
        );
        // 若存在多个相邻JSX节点，自动包裹为Fragment
        if (jsxNodes.length > 1) {
          const fragment = t.jsxFragment(
            t.jsxOpeningFragment(),
            t.jsxClosingFragment(),
            jsxNodes
          );
          path.replaceWith(t.returnStatement(fragment));
        }
      }
    }
  };
};

将上述代码保存为babel-plugin-auto-wrap-fragment.js，然后在Babel配置中引入：

{
  "plugins": [
    "./babel-plugin-auto-wrap-fragment.js",
    ["@babel/plugin-transform-react-jsx", { "runtime": "automatic" }]
  ]
}

Webpack配合配置说明 #

Webpack本身不处理JSX语法，只需确保通过babel-loader调用配置好的Babel规则处理JS/JSX文件。示例Webpack配置片段：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['react-auto-fragment', ['@babel/plugin-transform-react-jsx', { "runtime": "automatic" }]]
          }
        }
      }
    ]
  }
};

注意事项 #

• 确保React版本≥16.2.0，该版本开始支持Fragment及短语法<></>
• Babel插件的顺序会影响转译结果，自动包裹类插件需放在JSX转译插件之前
• 自定义插件需对Babel AST有基础了解，可借助@babel/parser和@babel/traverse调试AST结构

内容的提问来源于stack exchange，提问作者user20056053