解析错误：相邻的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 (
    


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

      

      
      

         Request Invite
     
     
}
   
    )
  },

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 (
             

        )
    }
})

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 access:';
var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
    if(this.state.submitted==false) {
        return 
    } else {
        return 
    }
},

---

#3楼

You should put your component between an enclosing tag, Which means: 您应该将组件放在一个封闭标签之间，这意味着：

// WRONG!

return (  
    
    
)

Instead: 代替：

// Correct

return (
    

       
       
    
)

Edit: Per Joe Clay's comment about the Fragments API 编辑： Per Joe Clay关于Fragments API的评论

// More Correct

return (
    
       
       
    
)

---

#4楼

It is late to answer this question but I thought It will add to the explanation. 回答这个问题为时已晚，但我认为这将增加解释。

It is happening because any where in your code you are returning two elements simultaneously. 之所以发生这种情况，是因为您在代码中的任何位置同时返回两个元素。

eg 例如

return(
    

    

  )

It should be wrapped in a parent element. 应该将其包装在父元素中。 eg 例如

 return(
      

        

        

      
      )

---

More Detailed Explanation 更详细的解释

Your below jsx code get transformed 您下面的jsx代码得到了转换

 class App extends React.Component { render(){ return ( 
 
Welcome to React
 
 ); } } 

into this 进入这个

 _createClass(App, [{ key: 'render', value: function render() { return React.createElement( 'div', null, React.createElement( 'h1', null, 'Welcome to React' ) ); } }]); 

But if you do this 但是如果你这样做

 class App extends React.Component { render(){ return ( 
Welcome to React
 
Hi
 ); } } 

this gets converted into this(Just for illustration purpose, actually you will get error : Adjacent JSX elements must be wrapped in an enclosing tag ) 这将转换为this（仅出于说明目的，实际上您会得到error : Adjacent JSX elements must be wrapped in an enclosing tag ）

 _createClass(App, [{ key: 'render', value: function render() { return React.createElement( 'div', null, 'Hi' ); return React.createElement( 'h1', null, 'Welcome to React' ) } }]); 

In the above code you can see that you are trying to return twice from a method call, which is obviously wrong. 在上面的代码中，您可以看到您正在尝试从方法调用返回两次 ，这显然是错误的。

Edit- Latest changes in React 16 and own-wards: 编辑-React 16和自己的区域中的最新更改：

If you do not want to add extra div to wrap around and want to return more than on child components you can go with React.Fragments . 如果您不想添加额外的div来包装并且想要返回比子组件更多的东西，则可以使用React.Fragments 。

React.Fragments are little bit faster and has less memory usage (no need to create an extra DOM node, less cluttered DOM tree). React.Fragments更快一点，并且具有更少的内存使用量（无需创建额外的DOM节点，更少的DOM树）。

eg (In React 16.2.0) 例如（在React 16.2.0中）

 render() { return ( <> React fragments. 
A heading
 More React fragments. 
Another heading
 Even more React fragments.  ); } 

or 要么

 render() { return (  React fragments. 
A heading
 More React fragments. 
Another heading
 Even more React fragments.  ); } 

or 要么

 render() { return [ "Some text.", 
A heading
, "More text.", 
Another heading
, "Even more text." ]; } 

---

#5楼

If you don't want to wrap it in another div as other answers have suggested, you can also wrap it in an array and it will work. 如果您不想像其他答案所建议的那样将其包装在另一个div中，也可以将其包装在一个数组中，它将起作用。

// Wrong!
return (  
   
   
)

It can be written as: 它可以写成：

// Correct!
return (  
    [,
    ]
)

Please note that the above will generate a warning: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'YourComponent'. 请注意，以上内容将产生警告： Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'YourComponent'. Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'YourComponent'.

This can be fixed by adding a key attribute to the components, if manually adding these add it like: 可以通过向组件添加key属性来解决此问题，如果手动添加，则可以像这样添加：

return (  
    [,
    ]
)

Here is some more information on keys: Composition vs Inheritance 以下是有关键的更多信息： 组合与继承

---

#6楼

The problem 问题

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

This means that you are trying to return multiple sibling JSX elements in an incorrect manner. 这意味着您试图以错误的方式返回多个同级JSX元素。 Remember that you are not writing HTML, but JSX! 请记住，您不是在编写HTML，而是在编写JSX！ Your code is transpiled from JSX into JavaScript. 您的代码从JSX转换为JavaScript。 For example: 例如：

render() {
  return (
foo bar
);
}

will be transpiled into: 将被转换成：

render() {
  return React.createElement("p", null, "foo bar");
}

Unless you are new to programming in general, you already know that functions/methods (of any language) take any number of parameters but always only return one value. 除非您一般不熟悉编程，否则您已经知道（任何语言的）函数/方法采用任意数量的参数，但始终仅返回一个值。 Given that, you can probably see that a problem arises when trying to return multiple sibling components based on how createElement() works; 鉴于此，您可能会发现基于createElement()工作方式尝试返回多个同级组件时会出现问题。 it only takes parameters for one element and returns that. 它仅接受一个元素的参数并返回该参数。 Hence we cannot return multiple elements from one function call. 因此，我们不能从一个函数调用中返回多个元素。

---

So if you've ever wondered why this works... 因此，如果您曾经想知道为什么这行得通...

render() {
  return (
    

      
foo
      
bar
      
baz
    
  );
}

but not this... 但这不是...

render() {
  return (
    
foo
    
bar
    
baz
  );
}

it's because in the first snippet, both

-elements are part of children of the

-element. 这是因为在第一个代码段中，两个

元素都是

-element的children的一部分。 When they are part of children then we can express an unlimited number of sibling elements. 当他们是children一部分时，我们可以表达无限数量的同级元素。 Take a look how this would transpile: 看一看如何转换：

render() {
  return React.createElement(
    "div",
    null,
    React.createElement("p", null, "foo"),
    React.createElement("p", null, "bar"),
    React.createElement("p", null, "baz"),
  );
}

---

Solutions 解决方案

Depending on which version of React you are running, you do have a few options to address this: 根据您所运行的React版本，您确实可以通过几种方法来解决此问题：

• Use fragments (React v16.2+ only!) 使用片段（仅适用于v16.2 +！）

  As of React v16.2, React has support for Fragments which is a node-less component that returns its children directly. 从React v16.2开始，React支持Fragments ， Fragments是一个无节点组件，可以直接返回其子级。

  Returning the children in an array (see below) has some drawbacks: 返回数组中的子级（见下文）有一些缺点：

  • Children in an array must be separated by commas. 数组中的子项必须用逗号分隔。
  • Children in an array must have a key to prevent React's key warning. 数组中的子代必须具有密钥，以防止React发出密钥警告。
  • Strings must be wrapped in quotes. 字符串必须用引号引起来。

  These are eliminated from the use of fragments. 这些都从使用片段中消除。 Here's an example of children wrapped in a fragment: 这是包裹在片段中的孩子的示例：

   render() { return ( <>     ); } 

  which de-sugars into: 哪个糖变成：

   render() { return (      ); } 

  Note that the first snippet requires Babel v7.0 or above. 请注意，第一个片段需要Babel v7.0或更高版本。

  ---

• Return an array (React v16.0+ only!) 返回一个数组（仅适用于v16.0 +！）

  As of React v16, React Components can return arrays. 从React v16开始，React组件可以返回数组。 This is unlike earlier versions of React where you were forced to wrap all sibling components in a parent component. 这与React的早期版本不同，在早期版本中，您被迫将所有同级组件包装在父组件中。

  In other words, you can now do: 换句话说，您现在可以执行以下操作：

   render() { return [
  foo
  , 
  bar
  ]; } 

  this transpiles into: 转换为：

   return [React.createElement("p", {key: 0}, "foo"), React.createElement("p", {key: 1}, "bar")]; 

  Note that the above returns an array. 请注意，以上代码返回一个数组。 Arrays are valid React Elements since React version 16 and later. 从React版本16及更高版本开始，数组是有效的React Elements。 For earlier versions of React, arrays are not valid return objects! 对于早期版本的React，数组不是有效的返回对象！

  Also note that the following is invalid (you must return an array): 另请注意，以下内容无效 （您必须返回一个数组）：

   render() { return (
  foo
   
  bar
  ); } 

  ---

• Wrap the elements in a parent element 将元素包装在父元素中

  The other solution involves creating a parent component which wraps the sibling components in its children . 另一种解决方案涉及创建一个父组件，该组件将兄弟组件包装在其children组件中。 This is by far the most common way to address this issue, and works in all versions of React. 到目前为止，这是解决此问题的最常用方法，并且适用于所有版本的React。

   render() { return ( 
   
  foo
   
  bar
   
   ); } 

  Note: Take a look again at the top of this answer for more details and how this transpiles . 注意：再次查看此答案的顶部，以获取更多详细信息以及如何转换 。