物化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; 

上