React查找所有具有类的组件，从外部更新组件状态或道具。带覆盖的模式

Question

我正在尝试实现一个覆盖模式。模态可以嵌套，可以从一个模态打开另一个模态。叠加背景应该是可堆叠的(不应该在每个新的模式下使后面的视图变暗)。

为了向文档添加模式，我使用了react-portal。

我可以通过操作dom节点使每个模式处于活动或非活动状态：

class Modal extends React.Component {
componentDidMount() {
    const previousModal = findDOMNode(this).previousSibling
    if (previousModal) {
        previousModal.className = "modal inactive"
    }

}
componentWillUnmount() {
    const previousModal = findDOMNode(this).previousSibling
    if (previousModal) {
        previousModal.className = "modal"
    }
}
render() {
    return (
        <div className="modal">Model</div>
    );
}

}

<div>
<div class="modal inactive" data-reactid="2">Model</div>
<div class="modal inactive" data-reactid="3">Model</div>
<div class="modal" data-reactid="4">Model</div>
</div>

感觉这不是正确的解决方案。因此，我正在寻找任何想法。

Answer 1

我能想到的最好的抽象是使用状态(要么是flux，redux，mobx或者你自己的自定义解决方案)，因为我对redux有更多的经验，下面是我将如何做到这一点。

我会有一个reducer，有一个modalCount属性，这将作为一个计数器，每次你打开一个模式，你增加属性1，当你关闭一个模式，你减少属性1，然后，在你的应用程序的根的某个地方，我会放置一个覆盖组件，使模式后面的视图变暗，当这个modalCount属性为0时，设置display css属性(或者更好，返回null)。

这有两个好处，你的代码变得更简单，它们不会干扰其他组件的属性和显示，第二，你现在将这种状态抽象到应用程序状态中，而不是依赖于DOM，而是实际上依赖于组件的react生命周期。