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的坑的主要内容,如果未能解决你的问题,请参考以下文章

React.js:初始渲染时引用不可用

react.js 中的悬停按钮

react.js 中的悬停按钮

React js - Laravel 5:在 POST 方法中使用 csrf-token

计算 React.js 中选中的复选框

React js在引导模式中显示动态html