React（8）条件渲染（类似 Vue 的 v-if）

14、条件渲染（类似 Vue 的 v-if）

讲道理说，React 本身的条件渲染，没有 Vue.js 用起来舒服。Vue.js 只需要在标签上添加 v-if 或者 v-show 就行，但 React 就比较麻烦了。

class HelloWord extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false
        }
    }

    // 渲染函数，this 指向实例本身
    render() {
        let display = this.display.bind(this)
        return <div>
            {/* 这种方法省略了 this 绑定的过程 */}
            <button onClick={display}>{this.state.show ? '点击隐藏' : '点击显示'}</button>
            {
                this.state.show
                    ?
                    <p>显示出来啦</p>
                    :
                    null
            }
        </div>
    }

    display() {
        this.setState({
            show: !this.state.show
        })
    }
}

如以上示例，通过三元操作符里面，返回 JSX 语法的 DOM 标签，或者 null ，来决定是否显示；

也可以将 JSX 语法的 DOM 作为变量，像下面这样使用。

render() {
    let display = this.display.bind(this)
    let DOM = null
    if (this.state.show) {
        DOM = <p>显示出来啦</p>
    }

    return <div>
        {/* 这种方法省略了 this 绑定的过程 */}
        <button onClick={display}>{this.state.show ? '点击隐藏' : '点击显示'}</button>
        {DOM}
    </div>
}

关于 v-show 就没什么好说的了吧？手动设置标签的 style 就行，很简单。