Question

我在React TypeScript中使用Nuka Carousel，销售商pwa react ts 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;
  }

这是正确的方法，无需覆盖CSS

这是解决方法Via Override css。这是针对那些对CSS覆盖感兴趣的人

Nuka Carousel未显示在react slide中高度道具0

1 个答案: