相鄰的 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>
    </>
}