沒有突變觀察者的Dom節點插入/移除

Question

我正在React中構建一個Tour組件，其目的是將用戶引入Web應用程序的界面。 “游覽”的部分涉及驗證用戶的動作，（例如，如果當前步驟涉及打開模態，一旦用戶這樣做，“游覽”應該進展，否則如果用戶通過點擊'嘗試進展則應該顯示錯誤下一個'）。

為此，我需要檢測DOM中的更改（例如，打開模式或出現特定類的div） 。 我有一些關於連接'onNext'功能的一些想法，一旦用戶與某些目標元素交互（例如'Open Modal'按鈕），就會推進教程，但這似乎是一個黑客攻擊，我想控制進展僅通過DOM中存在的實際元素進行瀏覽，而不是通過監聽將導致最終顯示必要元素的點擊。

除了使用jQuery之外，其中一個重要的限制是避免使用MutationObservers 。 話雖如此，我對如何驗證dom的預感感興趣，如何使用純javascript和dom來確定元素的添加和刪除？

Answer 1

我認為通過實施Flux架構來處理這個問題最好。 Redux很適合。

為您的游覽進程創建一個Redux Reducer。 此減速器的狀態應該是與用戶所在的巡回的當前步驟相對應的鍵。

游覽中使用的所有組件都應該可以作為道具訪問此游覽狀態。 使用此prop可確定功能。 即，對於必須打開的對話框示例，代碼可能在相關組件中看起來像這樣;

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
    }
}

當用戶沒有參加巡視時，只需將tourStep中的tourStep設置為undefined ，任何巡視相關功能都將被關閉。

或者，如果你想讓你的組件保持干凈和“啞”，你可以在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'});
        }
    }
}