reactjs - 如何从包装器中成功返回已编译的 JSX MUI 结束标记

Question

我正在尝试从函数返回一点 MUI JSX，..但是编译器不喜欢某些元素结束标记。

它抱怨最后的 '</Grid> 和 <br />' 元素

const gridRowHeader = () => {
    return (
        <Grid item xs={3} ></Grid> 
            <Grid item xs={5} justifyContent="center" > 
                <h2 class='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 />
     );
};

更新和修复：

标签： reactjsmaterial-uireturn

Answer 1

实际上您的代码是错误的，您试图返回多个组件

尝试这个

    const gridRowHeader = () => {
        return (
          <>
            <Grid item xs={3} />
                <Grid item xs={5} justifyContent="center" > 
                    <h2 class='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 />
        </> 
     );
}

此外，当 const 函数只返回某些内容时什么都不做，代码可以简化为：

const gridRowHeader = () => 
         (
          <>
            <Grid item xs={3} />
                <Grid item xs={5} justifyContent="center" > 
                    <h2 class='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 />
        </> 
     );

这样，您的组件将只返回一项。<>...</> 是 React 片段的简写（在此处阅读更多内容）。您可以使用 a 代替片段<div>，但片段不会在 DOM 中引入任何新节点。