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