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

【问题标题】：JSX expressions must have one parent element with conditional expression [duplicate]JSX 表达式必须有一个带有条件表达式的父元素 [重复]
【发布时间】：2020-04-24 11:43:51
【问题描述】：

我正在使用大括号来包含一个 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>
);

}

【问题讨论】：

你必须将<Logo/ > <Rank /> ... 包裹在另一个元素中。
谢谢你，Emile 和 Felix，它成功了。我明白了。

标签： javascript reactjs

【解决方案1】：

当您的 JSX 表达式在“顶层”有多个元素时，就像您在此处所做的那样，它们是“兄弟”，您需要在开头使用 <> 并在结尾使用 </> 包装所有 JSX。这称为 Fragment，因为 JSX 是如何定义和解析的，所以需要它。在您的情况下，Logo Rank ImageLinkForm FaceRecognition 表达式需要包装在片段中。

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

【讨论】：

谢谢 Noam Bendelac，它成功了，我明白了。