グローバルにアクセス可能なモーダルコンポーネントの反応

Question

私のアプリのどこからでもアクセス可能なモーダルを実装するうえで、苦労しています。

モーダルを持つすべてのコンポーネントで局所的な状態がisOpenであることを避けたいのは、一度に1つのモーダルしか表示できないためです。私はまた、モーダルが将来どのようなコンポーネントから起動されるべきか不確実なので、すべてのコンポーネントに小道具を送る必要を避けたい。

私はその後、Reduxのモーダルサブ状態にisOpenとcomponentを保存する私のトップレベルAppコンポーネントで実装ベースのモーダル・コンポーネントを有する、Reduxのでそれを解決しようとしましたが、そのコンポーネントがなければならないので、これは多くの問題を導入ユーザーがモーダルと対話するたびに更新されます。

私もReact 16のポータルを使って試しましたが、私のニーズに合わないようでした。ヘルプは高く評価しました。ここでのアイデアやベストプラクティスは？

Answer 1

react-semantic-uiでモーダルの実装を見ると、modalは本体ルートのポータルからインスタンス化された自己管理コンポーネントです。あなたのアプリケーションのどこにでもアクセスしたい場合は、それを参照してコンパウンド3に渡してください。

Answer 2

すでに使用しているのは、Reduxで実装した集中化された状態です。

Reactを行う必要があるコンポーネントだけがRerenderedされるようにReact Baobabで実装がより明確になるかもしれません。

注：デモンストレーションの理由から、モーダルを使用する多くのコンポーネントで動作しない1つのプロパティ "isOpened"を使用して作業しています。これが当てはまる場合は、あなたの状態に何かを追加する必要があります。例えば、あなたが開きたいモダルのidと、このidが（SomeComponentの中で）設定されているかどうかを確認する必要があります。

モーダル：

import React from "react"; 

export default class Modal extends React.Component { 
    render() { 
     return (
      <div className="myModal"></div> 
     ); 
    } 
} 

SomeComponent：

import React from "react"; 
import { branch as BaobabBranch } from "baobab-react/higher-order"; 
import PropTypes from "prop-types"; 
import { openModal } from "./actions/Modal"; 

@BaobabBranch({ 
    modal: ["modal"] 
}) 
export default class SomeComponent extends React.Component { 
    static propTypes = { 
     dispatch: PropTypes.func.isRequired, 
     modal: PropTypes.object.isRequired 
    } 

    onOpenModal() { 
     this.props.dispatch(openModal); 
    } 

    render() { 
     return (
      <div className="someComponent"> 
      { this.props.modal.isOpened ? 
       <Modal /> 
        : 
       <div class="content" onClick={::this.onOpenModal}></div> 
      } 
      </div> 
     ); 
    } 
} 

アクション/モーダル：

export const openModal = state => { 
    state.select("modal").set(Object.assign({}, state.get("modal"), { 
     isOpened: true 
    })); 
}; 

状態：

import Baobab from "baobab"; 

const state = new Baobab({ 
    modal: { 
     isOpened: false, 
     content: "someContent" 
    } 
}); 

短い説明：

状態は、上記の値で初期化されるグローバル状態を保持します。 SomeComponentのcontent divをクリックすると、openModalアクションが実行されます。すべてのアクションの最初の引数は、常に状態そのものです。状態の値が変更されるとすぐに（@BaobabBranchを使用して）すべてのリッスンコンポーネントが新しい小道具について再通知し、再レンダリングします。

他のコンポーネントを追加すると、モーダル値も聞くことができます。これにより、モーダル処理を集中化し、レイヤー間のバブル値を上下させないために必要なものがすべて用意されています。