logo标签列表

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

javascriptreactjscomponents
6
我正在尝试打印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>

我本来期待收到“亲爱的你好！”和下一行的“蓝色”，但是我收到了以下错误信息。
错误：
请点击这里查看图片描述。
请同时发布您的错误信息。 - Abdullah Khan
已完成，兄弟...... - Deadpool
刚刚注意到错误中有一个错误。应该是“JSX”而不是“XJS”... - Chris
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组件只能返回一个表达式，但您正在尝试返回两个<div>元素。 不要忘记，render()函数本质上是一个函数。函数总是需要输入一定数量的参数，并且始终只返回一个值（除非void）。
很容易混淆，但您正在编写JSX而不是HTML。JSX只是javascript的语法糖。因此，一个元素将被转换为：
React.createElement('div', null, 'Hello Dear!');

这将生成一个React元素，您可以从render()函数中返回它，但是您不能单独返回两个元素。相反，您可以将它们包装在另一个具有这些

作为子元素的元素中。

来自官方文档:

注意：

组件必须返回单个根元素。这就是为什么我们添加了一个

来包含所有<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
在HTML标准中，你不能将div放在span中。 - Hajji Tarik
我正在使用React Fiber进行开发，但是在以下代码中遇到了相同的错误：return ([ <div class="iconsgvcontainer"><IconFlight> </IconFlight>Vuelos</div> <SectionContent></SectionContent> ]); - stackdave
@stackdave，你忘记加逗号了。你正在返回一个数组，因此需要正常分隔每个元素。 - Chris
1
这真的救了我的一天。 - okeziestanley
3

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

将所有元素包裹在一个 div 中，例如：

return (
      <div> 
            Hello Dear!
            <div>{this.props.color}</div>
      </div>
);
原因: 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>     
);
1
return (  <div>
                <div> Hello Dear!</div>
                <div>{this.props.color}</div>
         </div>
            );

嗨，返回的元素应该被包裹在某个东西里面。只需像上面那样添加 <div> 就可以了 ;)

1
渲染函数应该只返回一个根元素，试试这个。
//一个组件
var George = React.createClass({
        render: function(){
            return (
                <div>
                <div> Hello Dear!</div>
                <div>{this.props.color}</div>
                </div>
            );
        }
    });
1
事实上，您的问题是尝试同时渲染多个元素，而在此版本的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'));
1

在返回语句中，将您使用的所有内容都包含在另一个div标签内。

render: function(){
            return (
                <div>
                    <div> Hello Dear!</div>
                    <div>{this.props.color}</div>
                </div>
            );
        }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接