javascript - 如何让我的菜单逻辑更简洁？

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}
....