错误:相邻的JSX元素必须包装在封闭标记中
Dea*_*ool 6 javascript components reactjs
我试图打印反应组件的道具,但收到错误.请帮忙:
片段:
<!-- 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>
我期待"亲爱的你好!" 然后下一行"蓝色".但是,我收到了这个错误.
错误:
Chr*_*ris 12
反应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()函数返回,但不能单独返回两个元素.相反,你将它们包装在另一个具有这些divs作为子元素的元素中.
来自官方文档:
警告:
组件必须返回单个根元素.这就是为什么我们添加了一个
<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'));
- @HajjiTarik,你是对的.固定:) (2认同)
| 归档时间： |
|
| 查看次数： |
9160 次 |
| 最近记录： |