在React Component与“ ref”中调用“ document.getElementByID”

Question

我试图通过更改模式的样式属性来打开模式，因此它是可见的。当我编写这样的函数时，我的工作非常完美：

modalAction(action) {
        switch (action) {
            case "open": {
                const modal = document.getElementById("login-popup");
                modal.style.opacity = 1;
                modal.style.visibility = "visible";
            }

        }
    } 

但是我从未见过这样的反应代码。在Insead中，我读到很多有关使用这样的代码的裁判的信息：

<div className="login-popup" ref={(ref) => {this.loginPopup = ref}} id="login-popup">

但是据我所知，使用引用只会使我无法访问相同（或嵌套）组件中的虚拟DOM元素。情态是自身的一个组成部分，没有嵌套，而是被调用。

我可以使用redux解决我的问题，但编写一个reducer-case以及一个动作并产生一个额外的状态似乎对我的这类问题来说是过大的。

如果模态既不嵌套也不位于调用它的同一组件中，如何正确访问模态样式属性？ Thx