react.js中render的return的坑
demo代码:
<scripttype="text/babel">
var HelloComponent=React.createClass({ render:function(){ return
<h1>Hello World</h1>} }); ReactDOM.render(
<HelloComponent/>,document.getElementById('reactContainer') )
</script>
运行结果:
原因:
JavaScript会自动给行末添加分号。如果 return 后面换行不加括号就会变成 return;
比如返回的是多行,就需要加括号,单行不需要,我在开始的时候还遇到一个问题,返回的内容需要使用一个大的标签将其包裹。
就是这里return后面必须加()
<scripttype="text/babel">
var HelloComponent=React.createClass({ render:function(){ return(
<h1>HelloWorld</h1>) } }); ReactDOM.render(
<HelloComponent/>,document.getElementById('reactContainer') )
</script>
解决后的截图: