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 就行，很簡單。