在React中使用if else 条件判断使用

在react中用jsx渲染dom的时候经常会遇到if条件判断，然而在jsx中竟是不允许if条件判断的。

下面我总结了几种判断方式：

方式一：自定义函数中使用if...else...

export default class Life extends React.Component{
	render() {
		let flag = true
		let renderMessage 
		if(flag) {
			renderMessage = (<h1>标题1</h1>)
		} else {
			renderMessage = (<h1>标题2</h1>)
		}
		return (
				<div>
					{ renderMessage }
				</div>
			)
	}
}

方式二：render函数中使用if...else...

export default class Life extends React.Component{
	constructor(props) {
		super(props)
		this.state = {
			flag: true
		}
	}
	renderMessage() {
		if(this.state.flag) {
			return (<h1>标题11</h1>)
		} else {
			return (<h1>标题22</h1>)
		}
	}
	render() {
		
		return (
				<div>
					{ this.renderMessage.bind(this)() }
				</div>
			)
	}
}

方式三：render函数return中使用三元运算符

export default class Life extends React.Component{
	
	render() {
		let flag = true
		return (
				<div>
					{flag ? <h1>标题111</h1> : <h1>标题222</h1>}
				</div>
			)
	}
}

总结：短小的字段判断最好用三元表达式，如果是大块的元素都需要区分，就要利用变量了。