Nuka Carousel 不显示在 react slideHeight 道具 0 中

Question

我在 React TypeScript a sale 或 pwa react ts 中使用 nuka carousel app
Nuka 旋转木马不显示项目，因为 nuka 正在将 slideHeight 0 传递到 slider -frame
代码示例：

render() {
    const { title } = this.props;
    const { products } = this.state;
    const productsList = products.map((product: any) => (
      <Link to={'/product/' + product.id} key={product.id}>
          <ProductListItem product={product} />
      </Link>
    ))

    return (
      <div className="products">
        <div className="container">
          <h3>{title}</h3>
          <Carousel>
            {productsList}
          </Carousel>
        </div>
      </div >
    )
  }

Answer 1

我只需添加 if (products.length) 即可解决
解法：

render() {
    const { title } = this.props;
    const { products } = this.state;
    if (products.length) {
      const productsList = products.map((product: any) => (
        <Link
          to={'/product/' + product.id} key={product.id}
        >
          <ProductListItem product={product} />
        </Link>
      ))

      return (
        <div className="products">
          <div className="container">
            <h3>{title}</h3>
            <Carousel>
              {productsList}
            </Carousel>
          </div>
        </div >
      )
    }
    return null;
  }

There is no need to override css this is proper way

这是解决方案Via Override css。这是为那些对 css override

感兴趣的人准备的

Nuka Carousel 不显示在 react slideHeight 道具 0 中

Nuka Carousel not displaying in react slideHeight props 0

reactjs

typescript

carousel

saleor