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

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

片段：

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

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

错误：

解决方法

反应v16及更高版本

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

这样做很简单：

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

请注意,您需要为数组的每个元素声明一个键.根据官方消息来源,在React的未来版本中可能不需要这样做,但现在还没有.另外,不要忘记将数组中的每个元素分开,就像通常使用数组一样.

反应v15.6及更早版本

React Components只能返回一个表达式,但是您尝试返回两个< div>元素.

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

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

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

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

从official docs：

Caveat:

Components must return a single root element. This is why we added a <div> to contain all the <Welcome /> elements.

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

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

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

解决方法

猜你在找的JavaScript相关文章