React报错：Unexpected token, expected "," 求排查代码问题

我编写了一个简单的React组件，代码如下：

import React,{Fragment, useState} from "react";  
import './AppClass.css';

const AppClass =(props) => {
    const [isTrue, setIsTrue] = useState(false)
    
    return(
        <>
            <hr/>
            <h1 className="h1-red"> 
                {props.msg}
            </h1>
        </>
        {isTrue &&
            <>
            </hr>
            </>
        }
    )
}

export default AppClass;

但一直出现如下错误：

SyntaxError: C:\dev\my\go_apps\udemy_go_react\react-apps\my-app\src\AppClass.js: Unexpected token, expected "," (14:8)
  12 |             </h1>
  13 |         </>
> 14 |         {isTrue &&
     |         ^
  15 |             <>
  16 |             </hr>
  17 |             </>
ERROR in ./src/AppClass.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):

问题原因 #

• return语句只能返回单个根元素：React组件的return返回值必须是单个根节点，你当前代码里直接返回了两个同级的JSX片段（第一个<></>和条件渲染的{isTrue && ...}），这不符合语法要求，导致babel无法解析。
• 无效的闭合标签：条件渲染部分里的</hr>没有对应的<hr>开启标签，属于错误的标签使用方式。

修正后的代码 #

import React,{Fragment, useState} from "react";  
import './AppClass.css';

const AppClass =(props) => {
    const [isTrue, setIsTrue] = useState(false)
    
    return(
        <>
            <hr/>
            <h1 className="h1-red"> 
                {props.msg}
            </h1>
            {/* 将条件渲染的内容放到同一个根片段内 */}
            {isTrue && <hr/>}
        </>
    )
}

export default AppClass;

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