TypeError с использованием Materialize-CSS с React - PullRequest
Новая
       4

TypeError с использованием Materialize-CSS с React

0 голосов
/ 17 июня 2019

У меня проблема с использованием карусели Materialize-CSS. Стандартный способ создания карусели: 

<div class="carousel">
<a class="carousel-item" href="#one!"><img 
src="https://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img 
src="https://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img 
src="https://lorempixel.com/250/250/nature/3"></a>
</div>

Но я хочу создать элемент карусели для каждого элемента в массиве с именем "продукты", следовательно, я пытаюсь этот код в JSX: 

<div className="carousel">

{generalStore.products.map(p =>
<a className="carousel-item"><img src={p.pic} /></a>)}

</div>

p, рис. == URL изображения

Но это возвращает ошибку: 

TypeError: Cannot read property 'clientWidth' of undefined

Муравьиные идеи, чтобы решить эту проблему? Спасибо

1 Ответ

0 голосов
/ 18 июня 2019

Может быть также реализовано в materializeCSS.Для этого вам нужно сделать npm install materialize-css@next.После этого вам нужно импортировать materialize-css в ваш файл JS компонента.

Для использования компонентов Javascript materialize-css ссылка на эти компоненты должна быть сделана в componentDidMount(), а затем она может использоваться в ref.

CodeSandBox - рабочая демонстрация 

import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
import data from "./data.json";

class Carousel extends Component {
  componentDidMount() {
    const options = {
      duration: 300,
      onCycleTo: () => {
        console.log("New Slide");
      }
    };
    M.Carousel.init(this.Carousel, options);
  }

  renderThis = () => {
    return data.map(i => (
      <a key={i.url} className="carousel-item">
        <img src={i.url} />
      </a>
    ));
  };

  render() {
    return (
      <div
        ref={Carousel => {
          this.Carousel = Carousel;
        }}
        className="carousel"
      >
        {this.renderThis()}
      </div>
    );
  }
}

export default Carousel;
...