原文链接:https://www.jianshu.com/p/00226a584eff
React中render的用法:
一个组件类必须要实现一个render方法,这个方法必须要返回一个jsx元素。必须要用一个外层的jsx元素把所有的内容包裹起来,返回并列的多个jsx元素是不合法的。
错误的写法:
render () {
return (
<div>第一个</div>
<div>第二个</div>
)
}
正确的写法:
render () {
return (
<div>
<div>第一个</div>
<div>第二个</div>
</div>
)
}
在jsx中可以插入Javascript表达式,表达式返回的结果会相应的渲染到页面上面
要求:用{}大括号包裹。
Render(){
Const word = ‘is good’
Return(
<div>
<h1>react小涛{ word }</h1>
</div>
)
}
用函数表达式来返回:(函数表达式要用括号包裹)
Render(){
Return(
<div>
<h1>react小涛!{(function(){return ‘is good’})}</h1>
</div>
)
}
{}可以放任何的Javascript代码,render都会把这些代码和返回的内容如实的渲染到页面上。
{}可以用在标签的属性上:
Render(){
Const className=‘header’
Return(
<div classname={ className }>
<h1>React小涛</h1>
</div>
)
}
直接使用class在react.js的元素上添加类名如
这种方式是不合法的。
还有一个特例是for属性,例如
还有一个特例是for属性,例如
Render(){
Const isGoodWord = true
Return(
<div>
<h1>
React 小书
{isGoodWord
? <strong> is good</strong>
: <span> is not good</span>
}
</h1>
</div>
)
}
上面的代码中定义了一个isGoodWord变量为true,下面有个用{}包含的表达式,根据isGoodWord的不同值返回不同的内容。