物化css模式不能與反應組件一起使用

Question

我正在使用物化並且模態不工作。

在我的index.html我導入庫：

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> 
 
    <script src="./js/utils.js"></script>

在我utils.js我把初始化代碼的模式：

(function($) { 
 
    $(document).ready(function() { 
 
    // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered 
 
    $('.modal').modal({ 
 
     dismissible: true, // Modal can be dismissed by clicking outside of the modal 
 
     opacity: .5, // Opacity of modal background 
 
     inDuration: 300, // Transition in duration 
 
     outDuration: 200, // Transition out duration 
 
     startingTop: '4%', // Starting top style attribute 
 
     endingTop: '10%', // Ending top style attribute 
 
     ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available. 
 
     alert("Ready"); 
 
     console.log(modal, trigger); 
 
     }, 
 
     complete: function() { alert('Closed'); } // Callback for Modal close 
 
    }); 
 
    }) 
 
})(jQuery);

在我的部分，我把模態和按鈕來觸發它，但不工作：

import React, { Component } from 'react'; 
 

 
class WeddingTest extends Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     <div className="container"> 
 
     
 
     <a className="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a> 
 
     
 
     <div id="modal1" className="modal"> 
 
      <div className="modal-content"> 
 
      <h4>Modal Header</h4> 
 
      <p>A bunch of text</p> 
 
      </div> 
 
      <div className="modal-footer"> 
 
      <a href="#!" className="modal-action modal-close waves-effect waves-green btn-flat">Agree</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default WeddingTest;

我失去了一些東西在這裏？當我點擊按鈕時，模式沒有打開。

我做了一個測試把代碼放在App.js中並且工作！這裏我很困惑。也許與反應組件或其他東西沒有兼容性。

在此先感謝

Answer 1

我認爲，你應該把內部componentDidMount模態插件的初始化，因爲當你嘗試初始化裏面的$（document）jQuery插件。就緒，沒有頁面

import React, { Component } from 'react'; 

class WeddingTest extends Component { 
    componentDidMount(){ 
    $('.modal').modal({ 
     dismissible: true, 
     opacity: .5, // Opacity of modal background 
     inDuration: 300, // Transition in duration 
     outDuration: 200, // Transition out duration 
     startingTop: '4%', // Starting top style attribute 
     endingTop: '10%', // Ending top style attribute 
     ready: function(modal, trigger) { 
     alert("Ready"); 
     console.log(modal, trigger); 
     }, 
     complete: function() { alert('Closed'); } 
    }); 
    } 

    render() { 
    return (
     <div> 
     <div className="container"> 

     <a className="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a> 

     <div id="modal1" className="modal"> 
      <div className="modal-content"> 
      <h4>Modal Header</h4> 
      <p>A bunch of text</p> 
      </div> 
      <div className="modal-footer"> 
      <a href="#!" className="modal-action modal-close waves-effect waves-green btn-flat">Agree</a> 
      </div> 
     </div> 
     </div> 
     </div> 
    ); 
    } 
} 

export default WeddingTest; 

上