Javascript 将JQuery放在React组件中的何处？

我正在我的React应用程序中使用MaterializeCSS库。 所以，我想从中使用“模态”。有两种方法可以初始化它：

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

// Or with jQuery

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

所以，我通常是这样做的第二种方式：

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

那么为什么模态现在不起作用呢？

---

如何正确操作？

您只希望在React应用程序树结构的叶节点中使用jQuery。如果这个组件有任何子组件，这是一个坏主意。如果它是叶节点组件，那么您需要将jQuery逻辑放入componentDidMount（）函数中

---

本页有一些关于该主题的有用材料：

不要！使用react材料库这是一个非常糟糕的实现。我建议您查看您可以使用的react库。网上有很多！谢谢你！当我将这个.getCurrentUser（）方法添加到componentDidMount时，你知道为什么它会停止工作吗？对不起，我不知道。这看起来不错。我会尝试在你之后添加一个捕获。类似于.then（//code.catch（（err）=>{console.log（'error:'+err）；}）