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>

 

 

解决后的截图：