攻城獅跳火圈

在撰寫React Class的過程中，需要建立render()以建構實際要輸出的HTML程式碼。如果該Class要建立的是一個簡單的Compoent，render()通常沒什麼問題。

render: function(){
    return <div>Hello {this.props.User.userName}</div>
}

但通常沒這麼好的事情，過不久就會遇到需要依據輸入資訊的條件以產生相對應HTML輸出的邏輯，例如需要依據性別顯示不同的稱謂。之前，我都是使用一個function(){}處理邏輯判斷輸出HTML。

getTitleBySex: function(){
    if(this.props.User.Sex == 1)
        return (<span>先生</span>);
    else
        return (<span>小姐</span>);
},
render: function(){
    return (
        <div>Hello {this.props.User.userName} 
            {this.getTitleBySex()}
        </div>  );
}

即時呼叫函式-Immediately-invoked function

這種方式不是不好，只是getTitleBySex()只用了一次。也就是說沒有共用性，卻寫了一個function()，覺得有些怪怪的。於是，查了React的官方文件-If-Else in JSX，才發現有另一個寫法。這個寫法是來自於immediately-invoked function expressions。也就是即時函式，隨寫即用，用完即丟。

所以我的程式碼就變成了底下這個樣子

render: function(){
    return （
        <div>
            Hello {this.props.User.userName} 
                {(function (){  
                if(this.props.User.Sex == 1)
                    return (<span>先生</span>);
                else
                    return (<span>小姐</span>);
                })()}
        </div>);
}

其實不難理解，就是宣告了一個Javascript的匿名function，然後在該function後面加上( )，直接執行該function。又因為這是在JSX的產生HTML的render()中，所以就再外加一個大括號{ }以宣告這是一個Javascript的敘述句。

---

參考

• If-Else in JSX