我正在尝试将旋转木马图像 slider 从 MaterializeCSS 添加到一个简单的 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>
);
}
}
这给了我一个错误: 无法读取未定义的属性“Carousel”
我尝试用 Jquery 来实现,没有错误,但没有成功!
最佳答案
我也遇到了同样的问题。
通过添加materializecss npm模块解决了这个问题
npm install materialize-css
然后将其导入到组件中
import M from "materialize-css";
并在componentDidUpdate方法中,添加了init
componentDidUpdate() {
let collapsible = document.querySelectorAll(".collapsible");
M.Collapsible.init(collapsible, {});
}
问题解决了!!
关于javascript - 在React中初始化materializecss组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50092014/