如何移除ReactJS OwlCarousel加载时出现的数字0

问题根源是代码里的seedlings.length && <OwlCarousel />逻辑：当seedlings是空数组时，length为0，而React会把数字0当作可渲染的文本内容，所以页面会显示0。

以下几种方法可以快速解决：

方法1：明确判断长度大于0 #

把判断条件从seedlings.length改成seedlings.length > 0，确保返回的是布尔值而非数字：

<div className="row section">
  {isLoading && <WidgetSkeleton cards={2} />}
</div>
{seedlings.length > 0 && (
  <OwlCarousel
    items={2}
    className="owl-theme"
    loop={false}
    nav={false}
    dots={false}
    stagePadding={30}
    responsiveClass={true}
    margin={16}
  >
    {seedlings.map((seedling) => (
      <ProductWidget seedling={seedling} key={seedling.seedlingid} />
    ))}
  </OwlCarousel>
)}
</div>

方法2：用双感叹号转为布尔值 #

通过!!把数字长度转为布尔值，空数组时!!0等于false，不会渲染任何内容：

{!!seedlings.length && (
  <OwlCarousel ... />
)}

方法3：使用三元运算符显式返回null #

更清晰地控制渲染逻辑，空数组时返回null，React不会渲染null：

{seedlings.length ? (
  <OwlCarousel ... />
) : null}

内容的提问来源于stack exchange，提问作者Oscar John