如何在具有响应的Materialise Css中使用ScrollFire演示

Question

var options = [
    {selector: '#staggered-test', offset: 50, callback: 'Materialize.toast("This is our ScrollFire Demo!", 1500 )' },
    {selector: '#staggered-test', offset: 205, callback: 'Materialize.toast("Please continue scrolling!", 1500 )' },
    {selector: '#staggered-test', offset: 400, callback: 'Materialize.showStaggeredList("#staggered-test")' },
    {selector: '#image-test', offset: 500, callback: 'Materialize.fadeInImage("#image-test")' }
  ];
  Materialize.scrollFire(options);

如何将这个Materialize.scrollFire（）与react一起使用。在我的 App.js 文件中，看起来像这样-

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

import Navbar from './components/navbar'

class App extends Component {

   componentDidMount() {
     const options = [
       {
         selector: '.main-text',
         offset: 0,
         callback: function(el) {
           Materialize.fadeInImage(el)
         }
       }
     ]

     Materialize.scrollFire(options)
   }
  
  render() {
    return (
      <div>
        <Navbar />
      </div>
    );
  }
}

export default App;

当我在componentDidMount（）LifeCycle中调用Materialize.scrollFire（）函数时，会显示未定义材料化，但是我已经从“ materialize-css”导入M 。如果我将M更改为从'materialize-css'导入Materialize 的Materialize，则它将显示 Materialize未定义。我如何实现此Materialize.scrollFire（ ）