解析错误：相邻的JSX元素必须包装在一个封闭的标记中 [英] Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

问题描述

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

I am trying to set up my React.js app so that it only renders if a variable I have set is 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>
    )
  },

基本上，这里的重要部分是if（this.state.submitted == false）部分（我想要这些）当提交的变量设置为false时显示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).

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

But when running this, I get the error in the Question:

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

Uncaught Error: Parse Error: Line 38: Adjacent JSX elements must be wrapped in an enclosing tag

这里有什么问题？我可以用什么来实现这个目的？

What is the issue here? And what can I use to make this work?

推荐答案

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

You should put your component between an enclosing tag, Which means:

// WRONG!

return (  
    <Comp1 />
    <Comp2 />
)

相反：

// Correct

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

编辑： Per Joe Clay关于片段API

Per Joe Clay's comment about the Fragments API

// More Correct

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

这篇关于解析错误：相邻的JSX元素必须包装在一个封闭的标记中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！