reactjs - Nuka Carousel 不显示在 react slideHeight Prop 0 中

Question

我在 React TypeScript a saleor 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 感兴趣的人准备的