JSX 表达式必须有一个带有条件表达式的父元素

Question

我正在使用大括号来包含javascript表达式，但是每当我包含大括号时，它都会给出一个错误：JSX表达式必须有一个父元素。我认为这与我的VSCODE有关。 我遇到了类似的问题和相同的错误，但我找不到解决方案。有没有办法解决它...

render () {
return (
<div className="App">
<Particles className='particles'params={ particlesOptions }/>
<Navigation />
{ this.state.route === 'route'
? <Signin />  
: <Logo />
<Rank />
<ImageLinkForm 
onInputChange={ this.onInputChange }
onButtonSubmit={ this.onButtonSubmit }
/>
<FaceRecognition box={ this.state.box } imageUrl={ this.state.imageUrl }/>
}
</div>
);

}

Answer 1

当你的 JSX 表达式在"顶层"有多个元素是"同级"时，就像你在这里所做的那样，你需要用开头的<>和结尾的</>来包装所有的 JSX。这称为片段，之所以需要它，只是因为 JSX 的定义和解析方式。在您的情况下，LogoRankImageLinkFormFaceRecognition表达式需要包装在片段中。

顺便说一句 - 一些较旧的答案使用<React.Fragment>，但现在您可以使用<>和</>