如何在封装函数中正确返回可通过编译的JSX MUI元素闭合标签

• JSX语法要求函数返回的JSX只能有一个根节点，原代码return后直接并列多个Grid、br元素，无外层容器包裹；同时首个

  return (<Grid item xs={3} />已提前闭合，后续单独出现的`</Grid>)
  

  `标签无对应开启标签，触发语法错误。
• <br'/'>写法不符合JSX自闭合标签规范，属于语法错误。
• 额外补充：JSX中定义元素类名需使用className属性，原代码中h2标签的class属性写法不符合规范，也会触发运行时报错。

1. 外层添加Fragment（简写为<></>）作为唯一根节点包裹所有内容
2. 补充<Grid container>父容器，对应后续的</Grid>闭合标签，保证Grid嵌套结构符合MUI规范
3. 修正br标签写法为标准自闭合格式<br />
4. 将h2标签的class属性替换为className

修复后完整代码：

const gridRowHeader = () => {
    return (
        <>
            <Grid container>
                <Grid item xs={3} ></Grid> 
                <Grid item xs={5} justifyContent="center" > 
                    <h2 className='classes.ModalHeader'> 
                        {t(title)}
                    </h2> 
                </Grid> 
                <Grid item xs={3}>
                </Grid>
                <Grid item xs={1} direction="row-reverse" > 
                    <CloseIcon onClick={closeModal} /> 
                </Grid> 
            </Grid>
            <br /><br />
        </>
     );
};

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