如何防止列表中的空项目被显示？

Question

我正在映射一系列书籍，并在ul列表中显示标题，但问题是，由于我将标题集的默认值设置为空字符串，因此列表会呈现最初为空的li项目。这里是我的书数组：

@observable books = [ 
    {title:"", owned: false} 
    ] 

而且我显示的书籍，像这样：

<div> 
     {this.props.store.books.map((b)=>{ 
      return (
       <ul> 
        <li>{b.title}</li> 
       </ul> 
      ) 
     })} 
    </div> 

如何阻止显示空头衔？

Answer 1

如果您不关心如果标题为空显示整个事情，您可以在阵列上使用.filter()，例如，

<div> 
    {this.props.store.books.filter(x => x.title).map((b) => { 
     return (
      <ul> 
       <li>{b.title}</li> 
      </ul> 
     ) 
    })} 
</div> 

如果你想只明确排除标题仍然显示，你可以考虑将它<li>到你呈现一个变量其他的事情。例如

<div> 
     {this.props.store.books.map((b)=>{ 
      const title = b.title ? <li>{b.title}</li> : null; 
      return (
       <ul> 
        {title} 
       </ul> 
      ) 
     })} 
    </div> 

Answer 2

您只需使用CSS3风格

CSS

ul li:empty { 
    display: none; 
}