当我尝试运行Transferring with ... in JSX示例
时var FancyCheckbox = React.createClass({
render: function() {
var { checked, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other` contains { onClick: console.log } but not the checked property
return (
<div {...other} className={fancyClass} />
);
}
});
React.render(
<FancyCheckbox checked={true} onClick={console.log}>
Hello world!
</FancyCheckbox>,
document.body
);
我得到Uncaught SyntaxError: Unexpected token {
。我尝试在jsfiddle
这是一个错误,还是需要一些额外的代码转换才能生效?
答案 0 :(得分:5)
要使用此功能,您必须拥有harmony enabled。不幸的是,您使用的小提琴集成并没有启用它。
有一个commit made recently可以添加它,所以它很可能会在那里。
如果您想立即使用它,您可以将文件托管在某个地方,或者只是将脚本直接添加到小提琴中:
<script>
(function () {
var tag = document.querySelector(
'script[type="application/javascript;version=1.7"]'
);
if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
}
tag.setAttribute('type', 'text/jsx;harmony=true');
tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');
})();
</script>
重要的一行是'text/jsx;harmony=true'
。 Check the updated fiddle