突然変異観測者のないDomノードの挿入/削除

Question

Reactでツアーコンポーネントを構築しています。その目的は、ユーザーをWebアプリケーションのインターフェイスに誘導することです。 「ツアー」の部分には、ユーザーの操作の検証が含まれます（たとえば、現在の手順でモーダルを開くと、ユーザーがそうすると「ツアー」が進まなければなりません。そうでない場合は、次'）。

DOMの変更を検出する必要があります（たとえば、モーダルが開いているか、特定のクラスが表示されているdivなど）。私は、ユーザーが特定のターゲット要素（例えば、 'Open Modal'ボタン）とやりとりするとチュートリアルを進行させる 'onNext'関数を配線することについていくつか考えましたが、これはハックのように思えます。最終的に必要な要素が表示されるようなクリックをリッスンすることではなく、DOMに存在する実際の要素だけを見て回ってください。

大きな制約の1つは、jQueryの使用に加えて、MutationObserversを避けることです。それは、私はどのように純粋なjavascriptとdomの要素の追加と削除を決定するために使用するだろう、DOMを検証する方法についての愚痴に興味がありますか？

Answer 1

私はあなたがこれを処理するためにFluxアーキテクチャを実装することで最も効果的だと思います。 Reduxは良いフィット感です。

ツアー進行のためのRedux Reducerを作成します。この減速器の状態は、ユーザーがいるツアーの現在のステップに対応するキーでなければなりません。

ツアーに使用されるすべてのコンポーネントは、このツアー状態に小道具としてアクセスする必要があります。この小道具を使用して機能を判断します。私。関連するコンポーネント内で、コードをこのように表示することができます。

openModal(){ 
    if(this.props.tourStep == 'prompt_modal_open'){ 
     ActionCreator.progressTourStep(); 
    } 
    // code for actually opening the modal goes here 
}, 

someOtherAction(){ 
    if(this.props.tourStep == 'prompt_modal_open'){ 
     //Display error message here 
    } else { 
     //normal action result here 
    } 
} 

ユーザーがツアーに参加されていない場合は、単にundefinedに減速してtourStepを設定し、任意のツアー関連の機能がオフになります。

また、コンポーネントをクリーンでダムにしておきたい場合は、このロジックをRedux-Thunkの助けを借りてアクションクリエータに直接入れることができます。

ActionCreator.openModal = function(){ 
    return function(dispatch, getState){ 
     var state = getState(); 
     if(state.tourStep == 'prompt_modal_open'){ 
      dispatch({type: 'progress_tour_step'}); 
     } 
     dispatch({type: 'open_modal'}); 
    } 
} 

ActionCreator.someOtherAction = function(){ 
    return function(dispatch, getState){ 
     var state = getState(); 
     if(state.tourStep != undefined){ 
      dispatch({type: 'show_error'}); 
     } else { 
      dispatch({type: 'some_other_action_type'}); 
     } 
    } 
}