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

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

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