javascript - 解析错误:相邻的JSX元素必须包装在一个封闭的标记中

我正在尝试设置我的react.js应用程序,以便它只在我设置的变量为真时呈现。
我的渲染函数的设置方式如下:

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)部分(我希望在提交的变量设置为false时显示这些div)。
但是当运行这个时,我得到了问题中的错误:
未捕获错误:分析错误:第38行:相邻的JSX元素必须包装在封闭标记中
这里的问题是什么?我能用什么来做这个工作?


最佳答案:

您应该将组件放在一个封闭标记之间,这意味着:

// WRONG!

return (  
    <Comp1 />
    <Comp2 />
)

相反:
// Correct

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

编辑:根据Joe Clay关于
// More Correct

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

评论