错误：必须将相邻的JSX元素包装在一个封闭标签中 [英] Error: Adjacent JSX elements must be wrapped in an enclosing tag
问题描述
我正在尝试打印React组件的道具，但出现错误。请帮助：
I am trying to print props of a react component but getting an error. Please help:
代码段：
<!-- 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>
我期望亲爱的你好！然后下一行蓝色。但是，我却收到此错误。
I am expecting "Hello Dear!" and then next line "blue". But, I am getting this error instead.
错误：
推荐答案
React v16和更高版本
As React v16的React组件可以返回一个数组。在v16之前，这是不可能的。
React v16 and later
As of React v16 React components can return an array. This was not possible prior to v16.
这样做很简单：
return ([ // <-- note the array notation
<div key={0}> Hello Dear!</div>,
<div key={1}>{this.props.color}</div>
]);
请注意，您需要为数组的每个元素声明一个键。根据官方消息，这个可能在React的未来版本中将不再是必需的，但从现在起不是这样。同样不要忘了像通常使用数组那样用，分隔数组中的每个元素。
Note that you need to declare a key for each element of the array. According to official sources, this might become unnecessary in future versions of React, but not as of right now. Also don't forget to separate each element in the array with , as you would normally with an array.
反应组件只能返回一个表达式，但是您试图返回两个< div> 元素。
React Components can only return one expression, but you are trying to return two <div> elements.
不要忘记 render（）函数就是那个函数。函数总是带有许多参数，并且总是精确地返回一个一个值（除非无效）。
Don't forget that the render() function is exactly that, a function. Functions always take in a number of parameters and always return exactly one value (unless void).
这很容易忘记，但是您在编写JSX却不是HTML。 JSX只是javascript的语法糖。因此，一个元素将被翻译为：
It's easy to forget, but you're writing JSX and not HTML. JSX is just a syntactic sugar for javascript. So one element would be translated as:
React.createElement('div', null, 'Hello Dear!');
这给出了一个React元素，您可以从 render（）函数，但是不能单独返回两个。相反，您将它们包装在另一个具有这些 div 作为孩子的元素中。
This gives a React element, which you can return from your render() function, but you cannot return two individually. Instead you wrap them in another element which have these divs as children.
来自 官方文档 ：
注意：
组件必须返回一个根元素。这就是为什么我们添加< div> 来包含所有< Welcome /> 元素的原因。
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'));
这篇关于错误：必须将相邻的JSX元素包装在一个封闭标签中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
