如何使我的菜单逻辑更简洁？答案

【问题标题】：How can I make my menu logic more concise?如何使我的菜单逻辑更简洁？
【发布时间】：2018-03-16 12:57:02
【问题描述】：

下面的代码更新了我的菜单系统。每个菜单项都在一个 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>

【问题讨论】：

标签： javascript reactjs redux jsx

【解决方案1】：

用你的所有值创建一个对象并解构对象

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}

【讨论】：

【解决方案2】：

你可以只隐藏菜单项，不渲染：

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

【讨论】：

幸运的是，我正在使用display: none，所以这应该可以直接使用，无需其他修改。

【解决方案3】：

你可以在你的 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>

【讨论】：