解析错误：相邻的 JSX 元素必须包含在封闭标记中

Question

我正在尝试设置我的 React.js 应用程序，以便它仅在我设置的变量为 true 时呈现。

我的渲染功能的设置方式如下：

render: function() {
    var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
    var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
    return (
    <div>

if(this.state.submitted==false)
{

      <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
      <div className="button-row">
         <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
     </div>
     </ReactCSSTransitionGroup>
}
   </div>
    )
  },

基本上，这里的重要部分是 if(this.state.submitted==false) 部分（我希望这些 div 元素在提交的变量设置为 false 时显示）。

但是在运行这个时，我得到了问题中的错误：

未捕获的错误：解析错误：第 38 行：相邻的 JSX 元素必须包含在封闭标记中

这里有什么问题？我可以用什么来完成这项工作？

原文由 user1072337 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你应该把你的组件放在一个封闭的标签之间，这意味着：

 // WRONG!

return (
    <Comp1 />
    <Comp2 />
)

反而：

 // Correct

return (
    <div>
       <Comp1 />
       <Comp2 />
    </div>
)

编辑： Per Joe Clay 关于 Fragments API 的评论

// More Correct

return (
    <React.Fragment>
       <Comp1 />
       <Comp2 />
    </React.Fragment>
)

// Short syntax

return (
    <>
       <Comp1 />
       <Comp2 />
    </>
)

原文由 wdanxna 发布，翻译遵循 CC BY-SA 4.0 许可协议