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>转换为您呈现的变量。 e.g。

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

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

2 个答案: