Как использовать ScrollFire Demo в Materialise Css с реагировать - PullRequest
Новая
       15

Как использовать ScrollFire Demo в Materialise Css с реагировать

0 голосов
/ 31 декабря 2018 

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 () с реакцией.В моем 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;

Когда я вызываю функцию Materialize.scrollFire () в компоненте LifeCycle componentDidMount (), тогда это показывает Материализация не определяется Но я уже импортирую Mиз 'materialize-css' .Если я изменю M на Materialise, как , импортируем Materialize из 'materialize-css' , тогда он покажет, что Materialize не определен. Как я реализовал этот Materialize.scrollFire () правильно

...