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代碼是否短小精干，一目了然。