javascript - 如何在不放置 div 的情况下检查 map 内的条件

Question

我试图在检查条件的情况下将“col-sm-6”放入一行中。但是当出现空值时，它返回一个带有“.col-sm-6”类的空白 div，我需要在值为空时隐藏该类。

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

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the 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>