Question

我有一个使用此组件显示UI的数组对象。我有一个问题，我的风格因为额外的而破了。

<ul className="dropdown-menu">
    {map(listItems, (obj,i) => 
        <li key={i} onClick={e => dropdownHandler(obj.handlerName)}>
          {obj.visible && <div>
                  <a>
                    {obj.iconClasses && 
                        <i className={obj.iconClasses}></i>
                    }
                    {obj.name}
                  </a>
                  <div key={i} className={classnames({'divider':obj.divider})}></div>
              </div>
          }
        </li>
    )}
</ul>

在{obj.visible ..的行中我还能做些什么？我不想包含div。

Answer 1

要将条件置于JSX内，我们可以使用ternary operator，如下所示：

{1==1 ? <div> hello </div> : null}

如果您不想在条件失败时渲染任何内容，请返回null。

使用此：

<li key={i} onClick={e => dropdownHandler(obj.handlerName)}>
      {obj.visible ? 
           <a>
              {obj.iconClasses && 
                   <i className={obj.iconClasses}></i>
              }
              {obj.name}
           </a>
       : null}
       {obj.visible ? 
           <div key={i} className={classnames({'divider':obj.divider})}></div>
       : null}
</li>

Answer 2

您可以简单地使用两个条件并省略包装元素：

<li key={i} onClick={e => dropdownHandler(obj.handlerName)}>
  {obj.visible &&
    <a>
      {obj.iconClasses && 
        <i className={obj.iconClasses}></i>
      }
      {obj.name}
    </a>
  }
  {obj.visible &&
    <div key={i} className={classnames({'divider':obj.divider})}></div>
  }
</li>

此外，使用数组索引作为键是反模式。您应该使用一些业务键。有关此answer的更多信息。

Answer 3

React的一个缺点是你需要将每个块包装在一个容器中。它们是working on the solution，但可能需要一段时间。与此同时，在您的情况下跳过额外<div的最简单方法是分别检查其下的两个元素：

{obj.visible &&
  <a>
    {obj.iconClasses && 
      <i className={obj.iconClasses}></i>
    }
    {obj.name}
  </a>
{obj.visible && <div key={i} className={classnames({'divider':obj.divider})}></div>}

在地图中跳过jsx的div包装

3 个答案: