React报错Adjacent JSX elements must be wrapped in an enclosing tag如何解决

JSX 语法要求任意表达式（包括三目运算符的两个返回分支）只能返回单个根级 JSX 元素。你当前代码中LOGIN分支返回了<LoginForm />、两个<br />、<Button />三个同级元素，SIGNUP分支同理返回三个未被包裹的同级元素，因此触发相邻元素需要外层包裹的报错。
你之前其他项目没有触发该报错，大概率是之前的三目分支仅返回单个元素，或是你已经主动给多元素加了外层包裹，没有触及这个语法限制。

优先选择无额外DOM生成的片段包裹方案，也可以根据实际场景选择其他方案：

• 方案1：用JSX短片段<>...</>包裹每个三目分支的内容（最优）
  修正后的完整代码如下，同时修复了你原代码中注册分支按钮点击逻辑错误的问题（原代码点击注册分支的按钮仍然触发跳转到注册页的逻辑，修正后可正常切回登录页）：

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("LOGIN")}>
                    LOGIN?
                </Button>
            </>
            }
        </section>
    </ThemeProvider>
);

• 方案2：如果需要给包裹层加key属性（比如循环渲染场景），可以用完整的React.Fragment标签代替短片段：

<React.Fragment key={自定义key值}>
  {/* 分支内的多元素内容 */}
</React.Fragment>

• 方案3：用实际DOM标签（比如div、span）包裹分支内容，会额外生成一层DOM节点，仅在需要给这组元素加公共样式、绑定公共事件时推荐使用。

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