如果列表为空，则显示标签

【问题标题】：Display label if list is empty如果列表为空，则显示标签
【发布时间】：2022-01-12 16:38:54
【问题描述】：

如果列表为空，我想在 React 页面中显示一个 div 层。我试过这个：

        {(() => {
          if (!ordersList && ordersList.length === 0) {
            return (
              <div className="alert alert-warning">No Orders found</div>
            )
          }
        })()}

但它不起作用。实现这一点的正确方法是什么？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

条件不正确。如果 list 为空，则 !ordersList 将为 false。所以，<div> 不会被渲染。

你可以试试这个：

{(() => {
          if (!ordersList || ordersList.length === 0) {
            return (
              <div className="alert alert-warning">No Orders found</div>
            )
          }
        })()}

甚至更简单：

{
  (!ordersList || ordersList.length === 0) && 
  <div className="alert alert-warning">No Orders found</div>
}

【讨论】：

【解决方案2】：

如果我对您的理解正确，您希望在ordersList（我认为在您的组件中的变量/状态）为空时有条件地呈现一个 div。然后将此添加到您的组件返回的 JSX 中。

{!ordersList.length && <div className="alert alert-warning">No Orders found</div>}

【讨论】：