碎碎念

把if else判斷弄成function，寫到外面去，回傳對應內容。

render函式再去呼叫此function即可。

--

學RN的同學知道，在組件的render方法中我們可以通過JSX來定義組件的具體佈局和顯示（ JSX 用於在JavaScript 中定義頁面視圖結構，它採用層層嵌套的語法組織頁面。）並且我們可以在JSX 中寫JavaScript，則需要將JS 代碼包在一個中括號裡面。但如果我們的組件比較複雜，需要根據不同的條件設置不同的樣式，比如我們的組件有個bottomView，如果它的狀態是可操作的，那麼我們底部就顯示操作按鈕，否則就用文本組件顯示異常報錯。如果直接使用if else判斷是不可以的。但是可以使用三目運算，比如：

錯誤示範：
<View style={styles.container}>
if(this.props.canHandle) {
<TouchableOcapacity....../>
} else {
<Text ....></Text>
}
</View >
正確示範：
<View style={styles.container}>
{this.props.canHandle ? <TouchableOcapacity....../> : <Text ....></Text>}
</View>

上面是一種方式，但三目運算也只能判斷條件是與否，如果過於復雜的判斷，比如bottomView可能會有多種不同的方式佈局，我們需要用if else if esle if .. else這樣的判斷該怎麼辦呢？前面我們講過可以在JSX中插入js，那麼我們可以將這些判斷放在js方法中，然後return我們判斷好的組件就行了，比如

<View style={styles.container}>
{this._renderBottom()}
</View>
_renderBottom() {
if(this.props.type === 1){
    return <Text.....>alaa</ Text>
} else if (this.props.type === 2){
    return <View..../>
} else if (...) else{..}
}

參考鏈接：( https://stackoverflow.com/questions/40477245/is-it-possible-to-use-if-else-statement-in-react-render-function )
( https://facebook.github.io /react/docs/conditional-rendering.html )