如何在不放置 div 的情况下检查地图内的条件答案

【问题标题】：How to check condition inside map without putting a div如何在不放置 div 的情况下检查地图内的条件
【发布时间】：2018-03-03 18:42:18
【问题描述】：

我正在尝试将“col-sm-6”放在一行中并检查条件。但是当 null 值到来时，它会返回一个带有“.col-sm-6”类的空白 div，当值为 null 时，我需要隐藏该类。

<div className="row">
  {attribute.attributeValues.map((list, index) =>
     <div className="col-sm-6" >
        {list.isSelected === 1 ?
           <div className="style">
             <span><i className="fa fa-check"></i>{list.tag_value}</span>
           </div>:''
         }
     </div>
  )} 
</div>

这给出的结果如下：

喜欢：

<div class="row">
  <div class="col-sm-6">Some Value</div>
  <div class="col-sm-6"></div>
  <div class="col-sm-6"></div>
</div>

但我想要：

<div class="col-sm-6">Some Value</div>
<div class="col-sm-6">Some Value</div>
<div class="col-sm-6">Some Value</div>

【问题讨论】：

标签： javascript twitter-bootstrap reactjs

【解决方案1】：

你可以使用React.Fragmentlike

<div className="row">
  {attribute.attributeValues.map((list, index) => 
     <React.Fragment key={index}>
         {list.isSelected === 1 ?
           <div className="style">
             <span><i className="fa fa-check"></i>{list.tag_value}</span>
           </div>:''
         }
     </React.Fragment>
  )} 
</div>

根据docs：

React 中的一个常见模式是组件返回多个元素。 Fragments让你分组一个孩子列表而不添加 DOM 的额外节点。

第二种方法去除三元条件下{}的包裹

<div className="row">
  {attribute.attributeValues.map((list, index) => 
     list.isSelected === 1 ?
           <div className="style">
             <span><i className="fa fa-check"></i>{list.tag_value}</span>
           </div>: null
   )} 
</div>

【讨论】：

【解决方案2】：

其实你只需要在map之前使用filter（MDN documentation）。您可以执行以下操作：

attribute.attributeValues.filter(list => list.tag_value).map(...

这样，使用filter，您将返回一个新数组，其中只有具有“真实”list.tag_value 值的项目。

在 JavaScript 中，没有“值”的所有内容都是 False (JavaScript Booleans)。这意味着上面的filter 将过滤掉任何list.tag_value 等于：undefined、null、空字符串（""）或等于0 的数字。

【讨论】：