解析错误：相邻的JSX元素必须包装在一个封闭标签中

本文翻译自：Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

I am trying to set up my React.js app so that it only renders if a variable I have set is true. 我试图设置我的React.js应用程序，以便仅在我设置的变量为true时才呈现。

The way my render function is set up looks like: 我的渲染功能的设置方式如下：

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>
    )
  },

Basically, the important portion here is the if(this.state.submitted==false) portion (I want these divs to show up when the submitted variable is set to false). 基本上，这里的重要部分是if（this.state.submitted == false）部分（当提交的变量设置为false时，我希望这些div出现）。

But when running this, I get the error in the Question: 但是，运行此命令时，出现以下问题：

Uncaught Error: Parse Error: Line 38: Adjacent JSX elements must be wrapped in an enclosing tag 未捕获的错误：解析错误：第38行：相邻的JSX元素必须包装在一个封闭的标记中

What is the issue here? 这是什么问题？ And what can I use to make this work? 我可以用什么做这项工作？

---

#1楼

参考：https://stackoom.com/question/27GRN/解析错误-相邻的JSX元素必须包装在一个封闭标签中

---

#2楼

React element has to return only one element. React元素只能返回一个元素。 You'll have to wrap both of your tags with another element tag. 您必须将两个标签都包装在另一个元素标签上。

I can also see that your render function is not returning anything. 我还可以看到您的渲染函数未返回任何内容。 This is how your component should look like: 这是您的组件的外观：

var app = React.createClass({
    render () {
        /*React element can only return one element*/
        return (
             <div></div>
        )
    }
})

Also note that you can't use if statements inside of a returned element: 还要注意，您不能在返回的元素内使用if语句：

render: function() {
var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early