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

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

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

Answer 2

您可以在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 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}

如何让菜单逻辑更简洁？

3 个答案: