在反应应用程序中使用轮播时出错答案

【问题标题】：Error on using Carousel in react application在反应应用程序中使用轮播时出错
【发布时间】：2018-12-28 13:57:20
【问题描述】：

我在反应应用程序中使用 MaterializeCSS。在我的渲染中使用 Carousel 并为其提供 javascript 代码。我在 M 处收到错误

 class App extends React.Component {

   render() {
       document.addEventListener('DOMContentLoaded', function() {
       var elems = document.querySelectorAll('.carousel');
       var instances = M.Carousel.init(elems, options);
  });
        return (
          <div>
     <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>
        <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
        <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
      </div>
         </div>
        )
      }
    }

【问题讨论】：

哪个错误？你能分享一下追溯吗？你如何导入“M”？
我直接从materializeCSS文档中使用了这个
我得到的 M 是未定义的
好的，所以你需要从某个地方导入'M'。我不知道你在说什么文档，你也可以分享一下吗？
materializecss.com/carousel.html

标签： reactjs materialize

【解决方案1】：

您应该在 React Lifecycle 的 componentDidMount() 事件中初始化 Carousel 以确保 DOM 是否已完全加载。

使用它，让render() 整洁干净。

componentDidMount(){
   document.addEventListener('DOMContentLoaded', function() {
       var elems = document.querySelectorAll('.carousel');
       var instances = M.Carousel.init(elems, options);
  });
}

另外我假设你已经在组件中定义了options。

【讨论】：

在这种情况下，你会得到错误，M 未定义，然后init 未定义。