React中的条件渲染
Vue.js中使用v-if/v-else实现模板中的条件渲染;
小程序中使用wx:if/wx:else实现模板中的条件渲染;
React中没有模板(即不需要v-if),也没有指令系统(即没有v-if)。——条件渲染需要手工实现
有四种渲染方式
好了,上代码
方法1:创建判断函数
上面的代码实现为此方法
f1(){
if(){
return JSX}else return JSX
}
}
{this.f1()}
//快捷输入代码块rcc
import React, { Component } from 'react'
export default class App extends Component {
// 假设数据库返回了“用户的性别”数据,0-表示女 1-表示男
state={sex:0}
showMsg(){
if(this.state.sex===0){
return (
<p>您好!女士!</p>
)
}else{
return (
<div>嘿!爷们儿!</div>
)
}
}
render() {
return (
<div>
{/*注释的方式*/}
{this.showMsg()}
{/*注意上面的()是必须的*/}
</div>
)
}
}
方法2:创建判断变量
render(){
let msg; if(){
msg=JSX
}
else msg=JSX
return <div>{msg}<div>
}
import React, { Component } from 'react'
export default class App extends Component {
// 假设数据库返回了“用户的性别”数据,0-表示女 1-表示男
state={sex:1}
render() {
let msg;
if(this.state.sex===0){
msg=<p>您好!女士!</p>
}else{
msg=<div>嘿!爷们儿!</div>
}
return (
<div>
{msg}
</div>
)
}
}
方法3:三目表达式
<div>{this.state.xx==0 ? JSX : JSX}</div>
import React, { Component } from 'react'
export default class App extends Component {
// 假设数据库返回了“用户的性别”数据,0-表示女 1-表示男
state={sex:0}
render() {
return (
<div>
{this.state.sex===0?<p>您好!女士</p>:<div>哈!爷们儿!</div>}
</div>
)
}
}
方法4:逻辑与运算
{this.state.xx==0 && JSX}
{this.state.xx==1 && JSX}
import React, { Component } from 'react'
export default class App extends Component {
// 假设数据库返回了“用户的性别”数据,0-表示女 1-表示男
state={sex:1}
render() {
return (
<div>
{this.state.sex===0 && <p>您好!女士!!!</p>}
{this.state.sex===1 && <div>嘿!爷们儿!!!</div>}
</div>
)
}
}
上方的第四种方法是官网上推荐的方法,我比较喜欢用第三种和第四种方法 ,不过第三种方法看上去会特别的乱 ,第四种方法代码量有点大