Блог

Я использую библиотеку materialize css в своем приложении React. Итак, я хочу использовать «модальный» из него. Есть 2 способа инициализировать его:

 document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, options);
 });

// Or with jQuery

$(document).ready(function(){
$('.modal').modal();
});
  

Итак, я обычно делаю 2-й способ вот так:

 componentDidMount() {
    const $ = window.$;
    $('.dropdown-trigger').dropdown();
    $(document).ready(function () {
        $('.modal').modal();
    })
}
  

И у меня все сработало, но теперь у меня есть дополнительный метод в моем componentDidMount(), который запрашивает api сервера:

 componentDidMount() {
    this.getCurrentUser();
    const $ = window.$;
    $('.dropdown-trigger').dropdown();
    $(document).ready(function () {
        $('.modal').modal();
    })
}

getCurrentUser() {
    fetch('api/user/'  localStorage.getItem("currentUser")  '/me', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    })
        .then(response => {
            if (!response.ok) {
                this.setState({
                    isLoadong: false,
                    failed: true
                })
            }
            else {
                response.json().then(user => {
                    this.setState({
                        user: user,
                        isLoadong: false,
                        failed: false
                    })
                });
            }
        })
}
  

Так почему же модальный режим сейчас не работает?
Как все это сделать правильно?

Вы хотите использовать jQuery только в конечных узлах древовидной структуры вашего приложения React. Если у этого компонента есть какие-либо дочерние компоненты, это плохая идея. Если это компонент конечного узла, то вы захотите поместить свою логику jQuery в функцию componentDidMount().

На этой странице есть несколько полезных материалов по этому вопросу: https://reactjs.org/docs/integrating-with-other-libraries.html