Question

我试图在检查条件的情况下将“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>

Answer 1

您可以使用React.Fragment之类的

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

Answer 2

实际上，您只需要在filter之前使用map（MDN documentation）。你可以这样做：

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

这样，使用filter，您将返回一个新数组，其中只包含＆＃34; real＆＃34; list.tag_value值。

在JavaScript中，没有＆＃34; Value＆＃34;是False（JavaScript Booleans）。这意味着上面的filter会过滤掉任何list.tag_value等于：undefined，null，空字符串（""）或数字等于{{1 }}

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

2 个答案: