ReactJS使用空包装器<>报错：Unexpected token，求错误解决方法

问题说明 #

按照React官方建议使用空包装器<>...</>包裹组件内容时，抛出Unexpected token错误，相关代码如下：

JS代码（lik.js） #

const rootx = ReactDOM.createRoot(document.getElementById('Abt'));
const element5 = <AboutPage />; 
rootx.render(element5); 

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
}

HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <h2>Add React in One Minute</h2>
    <link rel="icon" type="./x-icon" href="./favicon.ico">
    <div id="Abt"></div>
    <!-- Load React -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <!-- Load React component -->
    <script type="module" src="lik.js"></script>
  </body>
</html>

原因 #

浏览器原生不支持JSX语法，空片段<>...</>是JSX独有的语法糖，无法被直接解析，必须编译为标准JavaScript代码（即React.createElement(React.Fragment, ...)）才能运行。

解决办法 #

方案1：用React.Fragment替代空片段 #

直接将空片段替换为完整的<React.Fragment>标签，无需额外编译工具，代码修改如下：

const rootx = ReactDOM.createRoot(document.getElementById('Abt'));
const element5 = <AboutPage />; 
rootx.render(element5); 

function AboutPage() {
  return (
    <React.Fragment>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </React.Fragment>
  );
}

方案2：引入Babel编译JSX #

如果希望继续使用空片段语法，需在HTML中加入Babel的CDN，让浏览器实时编译JSX代码：

修改HTML中的脚本引入部分：

<!-- 加载React -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- 新增Babel编译脚本 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- 将组件脚本的type改为text/babel -->
<script type="text/babel" src="lik.js"></script>

这样Babel会自动将空片段编译为React可识别的代码，即可正常运行。

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