Question

我正在尝试使用叠加层实现模态。模态可以嵌套，可以从另一模态打开一个模态。叠加背景应该是可堆叠的（不应该使用每个新模态使背后的视图更暗）。

要将modal添加到文档，我使用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有更多的经验，我就是这样做的。

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

这有两个很好的好处，你的代码每个模态变得更简单，它们不会混淆其他组件的属性和显示，其次，你现在将这个状态抽象为app状态而不依赖于DOM但是实际上是对组件的生命周期做出反应。

React从类中查找所有组件，从外部更新组件状态或道具。带叠加的模态

1 个答案: