TypeError 使用 Materialize-CSS 和 React

Question

我在使用 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>

但我想为名为 "products" 因此我在 JSX 中尝试这段代码：

<div className="carousel">

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

</div>

p,pic == 图片 url

但是这个returns一个错误:

TypeError: Cannot read property 'clientWidth' of undefined

Ant 解决这个问题的想法？谢谢

Answer 1

也可以在materializeCSS中实现。为此，您需要做 npm install materialize-css@next。在此之后，您需要在组件 JS 文件中导入 materialize-css。

要使用 Javascript materialize-css 组件，必须在 componentDidMount() 中引用这些组件，然后才能在 [=13= 中使用].

CodeSandBox - Working Demo

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;

TypeError 使用 Materialize-CSS 和 React

TypeError using Materialize-CSS with React

javascript

materialize

reactjs