相邻的 JSX 元素必须包裹在封闭标签中。您想要一个 JSX 片段 <>...</> 吗？

Question

这是我的代码：

return (
    <ThemeProvider theme={props.theme}>

        <section className={classes.loginForm}>
            {
            mode === "LOGIN"
            ?
            <LoginForm theme={props.theme} />
            <br/> <br/>
            <Button variant="contained" color="primary" onClick={() => setMode("SIGNUP")}>
                SIGNUP?
            </Button>
            :
            <SignUpForm theme={props.theme} />
            <br/><br/>
            <Button variant="contained" color="primary" onClick={() => setMode("SIGNUP")}>
                SIGNUP?
            </Button>
            }
        </section>

    </ThemeProvider>
);

错误出现在分隔线 HTML 元素的起始标记的第一个字符处。我不明白为什么会这样，因为我在其他地方的代码使用相同的原理并且完全没有错误。

Answer 1

大括号内的这些元素需要包裹在<React.Fragment />（简称<>和</>）

内

https://reactjs.org/docs/fragments.html

您的代码：

 {
            mode === "LOGIN"
            ?
            <LoginForm theme={props.theme} />
            <br/> <br/>
            <Button variant="contained" color="primary" onClick={() => setMode("SIGNUP")}>
                SIGNUP?
            </Button>
            :
            <SignUpForm theme={props.theme} />
            <br/><br/>
            <Button variant="contained" color="primary" onClick={() => setMode("SIGNUP")}>
                SIGNUP?
            </Button>
 }

更正后的代码：

{
    mode === "LOGIN"
    ?
    <>
        <LoginForm theme={props.theme} />
        <br/> <br/>
        <Button variant="contained" color="primary" onClick={() => setMode("SIGNUP")}>
            SIGNUP?
        </Button>
    </>
    :
    <>
        <SignUpForm theme={props.theme} />
        <br/><br/>
        <Button variant="contained" color="primary" onClick={() => setMode("SIGNUP")}>
            SIGNUP?
        </Button>
    </>
}

相邻的 JSX 元素必须包裹在封闭标签中。您想要一个 JSX 片段 <>...</> 吗？

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

javascript

jsx

reactjs