Reactは、クラスを持つすべてのコンポーネントを見つけ、コンポーネントの状態や小道具を外部から更新します。オーバーレイ付きモーダル

Question

オーバーレイ付きモーダルを実装しようとしています。モーダルはネストすることができ、別のモーダルを開くことが可能です。オーバーレイバックグラウンドはスタック可能でなければなりません（新しいモーダルごとに暗く表示しないでください）。

私は反応ポータルを使用してドキュメントにモーダルを追加します。

私は、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

私が考えることができる最も抽象的なのは、私がreduxでより多くの経験を持っているので、state（flux、redux、mobx、または独自のカスタムソリューション）を使用することです。

私は減算器を持っていて、modalCountプロパティを持っています。これはカウンタとして機能します。モーダルを開くたびにプロパティを1ずつ増やします。モーダルを閉じるとプロパティが1減ります。あなたのアプリのルートでは、このmodalCountプロパティが0のときに、表示CSSのプロパティを設定します（または、より良いが、nullを返します）。

これは、第2に、この状態をアプリケーション状態に抽象化し、DOMに頼るのではなく、実際にはコンポーネントのライフサイクルに反応することになります。