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

【问题标题】：Error: Adjacent JSX elements must be wrapped in an enclosing tag错误：相邻的 JSX 元素必须包含在封闭标记中
【发布时间】：2017-08-30 17:12:07
【问题描述】：

我正在尝试打印 react 组件的 props 但出现错误。请帮忙：

片段：

<!-- DOCTYPE HTML -->
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
    <script src="http://fb. me/JSXTransformer-0.12.1.js"></script>
    <!-- gap above is intended as else stackOverflow not allowing to post -->
</head>
<body>

    <div id="div1"></div>

    <script type="text/jsx">

        //A component
        var George = React.createClass({
            render: function(){
                return (
                    <div> Hello Dear!</div>
                    <div>{this.props.color}</div>
                );
            }
        });

        ReactDOM.render(<George color="blue"/>, document.getElementById('div1'));

    </script>
</body>
</html>

我期待“你好，亲爱的！”然后是下一行“蓝色”。但是，我收到了这个错误。

错误：

【问题讨论】：

请同时发布您的错误。
完成了兄弟......
刚注意到报错中有错误。应该是“JSX”而不是“XJS”...

标签： javascript reactjs components

【解决方案1】：

React v16 及更高版本

从 React v16 开始，React 组件可以返回一个数组。这在 v16 之前是不可能的。

这样做很简单：

return ([  // <-- note the array notation
  <div key={0}> Hello Dear!</div>,
  <div key={1}>{this.props.color}</div>
]);

请注意，您需要为数组的每个元素声明一个键。根据官方消息，这可能在未来的 React 版本中变得不必要，但目前还没有。另外不要忘记用, 分隔数组中的每个元素，就像通常使用数组一样。

React v15.6 及更早版本

React 组件只能返回一个表达式，但您正试图返回两个 <div> 元素。

不要忘记render() 函数就是这样一个函数。函数总是接受多个参数，并且总是准确地返回一个值（除非 void）。

这很容易忘记，但是您正在编写 JSX 而不是 HTML。 JSX 只是 javascript 的语法糖。所以一个元素将被翻译为：

React.createElement('div', null, 'Hello Dear!');

这给出了一个 React 元素，您可以从 render() 函数中返回它，但不能单独返回两个。相反，您将它们包装在另一个元素中，该元素将这些 divs 作为子元素。

来自official docs：

警告：

组件必须返回单个根元素。这就是我们添加<div> 以包含所有<Welcome /> 元素的原因。

尝试将这些组件包装在另一个组件中，以便您只返回一个：

 //A component
    var George = React.createClass({
        render: function(){
            return (
              <div>
                <div> Hello Dear!</div>
                <div>{this.props.color}</div>
              </div>
            );
        }
    });

    ReactDOM.render(<George color="blue"/>, document.getElementById('div1'));

【讨论】：

在 html 标准中，您不能将 div 放在 span 中
我正在使用 React Fiber，得到相同的错误代码：return ([
Vuelos
部分内容> ]);
@stackdave 你忘了逗号。您正在返回一个数组，因此通常将每个元素分开。
这确实拯救了我的一天

【解决方案2】：

使用 React 16，我们可以从 render 返回多个组件作为数组（没有父 div）。

return ([
    <div> Hello Dear!</div>,
    <div>{this.props.color}</div>
]);

【讨论】：

【解决方案3】：

问题是你从 render 方法返回了多个 html 元素，这里：

return (
      <div> Hello Dear!</div>
      <div>{this.props.color}</div>
);

React v16+ 解决方案：

React 16 包含了一个新元素React.Fragment，通过它我们可以包装多个元素，并且不会为 Fragment 创建 dom 节点。像这样：

return (
      <React.Fragment> 
            Hello Dear!
            <div>{this.props.color}</div>
      </React.Fragment>
);

或者返回一个数组：

return ([
            <p key={0}>Hello Dear!</p>
            <div key={1}>{this.props.color}</div>
]);

React v

将所有元素包装在一个包装器 div 中，如下所示：

return (
      <div> 
            Hello Dear!
            <div>{this.props.color}</div>
      </div>
);

原因：一个React组件不能返回多个元素，但是一个JSX表达式可以有多个子节点，你只能返回一个节点，所以如果有的话，一个@的列表987654327@ 要返回，您必须将组件包装在 div、span 或任何其他组件中。

还有一点，你还需要包含 babel 的引用，在 header 中使用这个引用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>

检查工作示例：

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
    <!-- gap above is intended as else stackOverflow not allowing to post -->
</head>
<body>

    <div id="div1"></div>

    <script type="text/jsx">

        var George = React.createClass({
            render: function(){
                return (
                    <div> Hello Dear!
                       <div>{this.props.color}</div>
                    </div>
                );
            }
        });

        ReactDOM.render(<George color="blue"/>, document.getElementById('div1'));

    </script>
</body>
</html>

【讨论】：

【解决方案4】：

将返回的 DOM 包装在单个 html 元素中。

试试这个

return (
    <div>            
        <div> Hello Dear!</div>     
        <div>{this.props.color}</div>
    </div>     
);

【讨论】：

【解决方案5】：

return (  <div>
                <div> Hello Dear!</div>
                <div>{this.props.color}</div>
         </div>
            );

嗨，return 中的元素应该被一些东西包裹起来。只需如上所示添加即可；)

【讨论】：

【解决方案6】：

渲染函数应该只返回一个根元素试试这个

//一个组件

var George = React.createClass({
        render: function(){
            return (
                <div>
                <div> Hello Dear!</div>
                <div>{this.props.color}</div>
                </div>
            );
        }
    });

【讨论】：

【解决方案7】：

将您在 return 语句中使用的所有内容都包含在另一个 div 标记中。

render: function(){
            return (
                <div>
                    <div> Hello Dear!</div>
                    <div>{this.props.color}</div>
                </div>
            );
        }

【讨论】：

【解决方案8】：

实际上你的问题是你试图同时渲染几个元素，这在这个版本的 react 中是不可能的，

原因渲染它是一个函数，本质上一个函数只返回一个值

但是使用 react-fiber 你可以做你想做的事，解决你的问题有两种解决方案：

对两个元素都使用包装器

    var George = React.createClass ({
         render: function () {
           return (
                <div>
                  <div> Hello Dear! </div>
                  <div> {this.props.color} </div>
                <div>
               );
           }
    });

ReactDOM.render(<George color = "blue" />, document.getElementById ('div1'));

第二种解决方案是返回一个包含两个元素的数组

var George = React.createClass ({
      render: function () {
          return ([
              <div key='0'> Hello Dear! </div>,
              <div key='1'> {this.props.color} </ div>
          ]);
      }
});

ReactDOM.render (<George color = "blue" />, document.getElementById ('div1'));

【讨论】：