Nuka Carousel не отображается в реагирующих слайдахВысота реквизита 0 - PullRequest
1 голос
/ 26 марта 2019

Я использую Nuka Carousel в реагировать TypeScript продавец PWA реагирует TS приложение
Карусель 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 >
    )
  }

1 Ответ

1 голос
/ 26 марта 2019

Я решаю это, просто добавив 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, это правильный способ

Вот решение Через переопределение css .это для тех, кто интересуется переопределением css

...