react.js中render的return的坑
Posted 前端胖籽
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
解决后的截图：
以上是关于react.js中render的return的坑的主要内容，如果未能解决你的问题，请参考以下文章