Materialize CSS 모달이 반응 구성 요소와 작동하지 않습니다.

Question

materialize를 사용 중이며 모달이 작동하지 않습니다.

(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);

: 내가 모달의 초기화 코드를 넣어 내 utils.js에서

<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>

: 내 index.html을에서

나는 라이브러리를 수입

내 구성 요소에서3210

나는 모달하고 실행할 수있는 버튼을 추가하는 듯했으나 작동하지 않습니다 :

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 내부 모달 플러그인의 초기화를 배치해야한다고 생각, 당신은 $ (문서) 안에 jQuery 플러그인을 초기화 할 때 .ready,이 있기 때문에 페이지

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; 

없음