我试图打印反应组件的道具,但收到错误.请帮忙：
片段：
<!-- 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作为子元素的元素中.
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'));
