物化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 中并成功了！我在这里很困惑。可能与 react 组件不兼容。

提前致谢

Answer 1

我认为，你应该将模态插件的初始化放在componentDidMount中，因为当你尝试在$(document).ready中初始化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;