Comment rendre ma logique de menu plus concise?

Question

Le code ci-dessous met à jour mon système de menus. Chaque élément de menu est dans une instruction if.

Le problème est que je dois définir le style pour chaque élément. Alors que j'ajoute des éléments, la logique devient énorme.

Le menu active et désactive la div correspondante.

Comment puis-je rendre cela plus concis?

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

Vous pouvez le faire dans votre JSX comme suit:

<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

Vous pouvez simplement cacher élément de menu, ne rend pas:

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

Answer 3

Créer un objet avec toutes vos valeurs et objet déconstruire

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}