React：將html元素統一管理

寫React組件，基本上使用jsx文件，在render方法中返回html節點。然而，在jsx中的html標籤中的js代碼，只能是簡單運算，對象，或函數調用，並不支持if-else或for-while等結構，所以，有時咱們須要根據條件決定不一樣元素，或決定是否顯示某元素時，不得不將這段代碼抽到render-return之外，如此，程序雖然能夠運行，代碼上卻破壞了html骨架結構，不便於樣式控制和直觀理解。這裏介紹幾種方法解決此問題，使得全部html元素在一處獲得統一管理。

1 簡單if-else

能夠使用三元運算符

 render(){
        return (
            <div>
                {1 > 2 ? <p>yes</p> : <a>no</a>}
            </div>
        )
    }

2 switch結構

能夠利用對象的map特性

    name: 'lucy',
    render(){
        return (
            <div>
                {{
                    'bob': <p>i am bob</p>,
                    'alan': <p>i am alan</p>,
                    'lucy': <p>i am lucy</p>
                    }[this.name]}
            </div>
        );
    }

3 複雜邏輯

包括集合處理以及複雜的條件判斷，應該將算法和數據分離，並將算法單獨封裝起來以實現簡單調用

如map

 render(){
        return (
            <div>
                {['you', 'are', 'good'].map((v, i)=>{
                    return <p key={i}>{v}</p>
                    })}
            </div>
        );
    },

如複雜判斷

    render(){
        return (
            <div>
                {this.shouldShow(
                <p>yes</p>,
                <p>no</p>)}
            </div>
        )
    },

    shouldShow(yesContent, noContent) {
        let ok;
        // 檢查條件1……
        // 檢查條件2……
        // ……
        if (ok) return yesContent;
        else return noContent;
    }

 

綜上，咱們能夠將組件中的html元素統一到一處進行管理。特別注意，html部分應該強調文檔結構、骨架，即，有哪些內容，如何鏈接，而不該該夾雜過多的邏輯代碼，所以，此處應該只使用簡單的控制語句或算法調用，而不該該寫複雜的js代碼。判斷標準：js代碼是否短小精幹，一目瞭然。