React中的条件渲染

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>
		)
	}
}

上方的第四种方法是官网上推荐的方法，我比较喜欢用第三种和第四种方法 ，不过第三种方法看上去会特别的乱 ，第四种方法代码量有点大