首页 文章

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

提问于
浏览 次
6

我试图打印反应组件的道具，但收到错误 . 请帮忙：

Snippet:

<!-- 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>

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

Error:

enter image description here

javascript reactjs components

8 回答

  • 12

    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 Components只能返回一个表达式，但是您尝试返回两个 <div> 元素 .

    不要忘记 render() 函数就是一个函数 . 函数总是包含许多参数，并且始终只返回一个值（除非无效） .

    这很容易忘记，但你在编写JSX而不是HTML . JSX只是javascript的语法糖 . 因此，一个元素将被翻译为：

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

    这给出了一个React元素，您可以从 render() 函数返回，但不能单独返回两个元素 . 而是将它们包装在另一个具有这些 div s作为子元素的元素中 .

    来自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'));
    回复于
  • 1

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

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

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

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

    React v16+ solution:

    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 < 16:

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

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

    Reason ：一个React组件不能返回多个元素，但是一个 JSX 表达式可以有多个子节点，你只能返回一个节点，所以如果你有一个 divs 列表要返回，你必须将你的组件包装在一个div中， Span 或任何其他组件 .

    还有一件事，你需要包括babel的引用，在头文件中使用这个引用：

    <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>
    回复于
  • 1

    将返回的DOM包装在一个html元素中 .

    试试这个

    return (
    <div>            
        <div> Hello Dear!</div>     
        <div>{this.props.color}</div>
    </div>     
);
    回复于
  • 3
    return (  <div>
                <div> Hello Dear!</div>
                <div>{this.props.color}</div>
         </div>
            );

    嗨，返回的元素应该被东西包裹 . 只需添加如上所示，应该工作;）

    回复于
  • 1

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

    //一个组件

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

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

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

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

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

    但是 react-fiber 你可以做你做的，纠正你的问题有两个解决方案：

    对于你的两个元素都是 use a wrapper

    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'));

    第二个解决方案是 return a array 与你的两个元素

    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'));
    回复于

相关问题