时间戳

首页 > 解决方案 > 在 React 中初始化 materializecss 组件

javascript - 在 React 中初始化 materializecss 组件

问题描述

我正在尝试将 MaterializeCSS 中的 Carousel 图像滑块添加到一个简单的 React 组件，但我无法初始化它！知道我应该在我的代码中的哪里做这将非常有帮助

import React, { Component } from 'react';
import { M } from 'materialize-css/dist/js/materialize.min.js';

export default class Slider extends Component {
  componentDidMount() {
   var elem = document.querySelector('.carousel');
   var instance = M.Carousel.init(elem, { duration: 200 });
 }
render() {
 return (
  <div className="container center-align">
   <h1 className="header pink-text">Slider</h1>
    <div className="carousel">
      <a className="carousel-item" href="#one!">
        <img src="https://www.w3schools.com/images/picture.jpg" />
      </a>
      <a className="carousel-item" href="#two!">
        <img src="../../public/images/lana/1.jpg" />
      </a>
      <a className="carousel-item" href="#three!">
       <img src="../../public/images/lana/1.jpg" />
      </a>
      <a className="carousel-item" href="#four!">
       <img src="../../public/images/lana/1.jpg" />
      </a>
       <a className="carousel-item" href="#five!">
        <img src="../../public/images/lana/1.jpg" />
       </a>
     </div>
    </div>
  );
 }
}

这给了我一个错误：无法读取未定义的属性“轮播”

我试图用 Jquery 来做，没有错误但没有用！

标签： javascriptreactjscarouselmaterialize

解决方案

我遇到过同样的问题。

通过添加materializecss npm模块解决了它

npm install materialize-css

然后将其导入组件

import M from "materialize-css";

并在 componentDidUpdate 方法中，添加了 init

componentDidUpdate() {

    let collapsible = document.querySelectorAll(".collapsible");

    M.Collapsible.init(collapsible, {});
  }

问题解决了！！

推荐阅读