- 一个组件类必须要实现
render
方法,render
方法必须要返回jsx
元素,必须要用一个外层的JSX
元素把所有内容包裹起来。返回并列多个JSX
元素是不合法的: - 错误示例:
...
render () {
return (
<div>first</div>
<div>second</div>
)
}
...
- 必须使用外层元素包裹:
...
render () {
return (
<div>
<div>first</div>
<div>second</div>
</div>
)
}
...
表达
表达式插入
在 JSX 当中你可以插入 JavaScript 的表达式,表达式返回的结果会相应地渲染到页面上。表达式用 {} 包裹:
...
render () {
const show = 'Hello World'
return (
<div>
<h1>{show}</h1>
</div>
)
}
...
{}
内可以放任何 JavaScript 的代码,包括变量、表达式计算、函数执行等- 表达式插入也可用于标签的属性上:
...
render () {
const show = 'Hello World'
const className = 'header'
return (
<div className={className}>
<h1>{show}</h1>
</div>
)
}
...
{}
里边也可以放jsx
,可以在render
函数内部根据不同条件返回不同的JSX
:
...
render () {
const flag = true
return (
<div>
<h1>
{flag
? <strong>happy</strong>
: <span>sad</span>
}
</h1>
</div>
)
}
...