如何讓我的菜單邏輯更簡潔？

Question

下面的代碼更新我的菜單系統。每個菜單項都在if語句中。

問題是我必須爲每個項目設置樣式。所以當我添加項目時，邏輯變得很大。

菜單當然會打開和關閉相應的div。

我該如何使這更簡潔？

var style_1; 
var style_268; 
var style_280; 
if (this.props.MenuFave.current === '1') { 
    style_1 = { 
    display: 'inline-block' 
    }; 
    style_280 = { 
    display: 'none' 
    }; 
    style_268 = { 
    display: 'none' 
    }; 
} 
if (this.props.MenuFave.current === '280') { 
    style_280 = { 
    display: 'inline-block' 
    }; 
    style_1 = { 
    display: 'none' 
    }; 
    style_268 = { 
    display: 'none' 
    }; 
} 
if (this.props.MenuFave.current === '268') { 
    style_268 = { 
    display: 'inline-block' 
    }; 
    style_280 = { 
    display: 'none' 
    }; 
    style_1 = { 
    display: 'none' 
    }; 
} 

JSX

<div id = 'fave_hold'> 
    <div className = 'faves' id = 'fave_hold_arc' style={style_1} > 
     {tags1} 
    </div> 
    <div className = 'faves' id = 'fave_hold_news' style={style_280}> 
     {tags280} 
    </div> 
    <div className = 'faves' id = 'fave_hold_sw' style={style_268}> 
     {tags268} 
    </div> 
    </div> 

Answer 1

如下你可以做你JSX裏面：

<div id = 'fave_hold'> 
    {this.props.MenuFave.current === '1'? 
    <div className = 'faves' id = 'fave_hold_arc' > 
     {tags1} 
    </div>:null} 
    {this.props.MenuFave.current === '280'? 
    <div className = 'faves' id = 'fave_hold_news' > 
     {tags280} 
    </div>:null} 
    {this.props.MenuFave.current === '268'? 
    <div className = 'faves' id = 'fave_hold_sw' > 
     {tags268} 
    </div>:null} 
</div> 

Answer 2

你可以只隱藏菜單項，不渲染：

{this.props.MenuFave.current !== '1' ? (
<div className = 'faves' id = 'fave_hold_arc' > 
    {tags1} 
</div> 
) : null} 
.... 

Answer 3

創建所有值的對象和對象解構

const menuStyles = { 
    1: { 
    display_1: 'inline-block', 
    display_280: 'none', 
    display_268: 'none' 
    }, 
    280: { 
    display_1: 'none', 
    display_280: 'inline-block', 
    display_268: 'none' 
    }, 
    268: { 
    display_1: 'none', 
    display_280: 'none', 
    display_268: 'inline-block' 
    } 
} 
const currentStyle = menuStyles[this.props.MenuFave.current] 
const {display_1, display_280, display_268} = currentStyle 
const style_1 = {display: display_1} 
const style_268 = {display: display_268} 
const style_280 = {display: display_280}