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做到这一点，没有错误，但是没有用！

最佳答案

似乎您正在使用.min文件从中导入M。您应该安装MaterializeCSS作为节点模块。您收到错误消息是因为M没有定义为任何东西。该.min文件没有任何导出。

如果要等到脚本加载完毕，最好使用回调而不是setTimeout来完成。

function loadScript(url, callback) {
  var script = document.createElement("script")
  script.type = "text/javascript";
  if (callback) {
    script.onload = callback;
  }
  document.body.appendChild(script)
  script.src = url;
}


loadScript(pathtoscript, function() {
  alert('script ready!');
});