javascript - 在 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">

但据我所知，使用 refs 只会让我访问相同（或嵌套）组件中的虚拟 DOM 元素。模态是它自身的一个组件，它不是嵌套的。

我可以使用 redux 来解决我的问题，但是编写一个 reducer-case 以及一个 action 并产生一个额外的状态对于我的问题来说似乎是多余的。

如果模态既不嵌套也不在调用它的同一组件中，我如何以正确的方式访问模态样式属性？谢谢

标签： javascriptreactjs