React组件中条件渲染

四种渲染方式

1、创建判断函数

//快捷输入代码块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、创建判断变量

import React, { Component } from 'react'

export default class App extends Component {
	state={sex:1}
	
	render() {
		let msg;
		if(this.state.sex===0){
			msg=<p>您好！女士！</p>
		}else{
			msg=<div>嘿！爷们儿！</div>
		}
		
		return (
			<div>
				{msg}
			</div>
		)
	}
}

3、三目表达式

import React, { Component } from 'react'

export default class App extends Component {
	state={sex:0}
	
	render() {
		return (
			<div>
				{this.state.sex===0?<p>您好！女士</p>:<div>哈！爷们儿！</div>}
			</div>
		)
	}
}

4、逻辑与运算

import React, { Component } from 'react'

export default class App extends Component {
	state={sex:1}
	
	render() {
		return (
			<div>
				{this.state.sex===0 && <p>您好！女士！！！</p>}
				{this.state.sex===1 && <div>嘿！爷们儿！！！</div>}
			</div>
		)
	}
}

个人喜欢第三种和第四种，不乱