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

我正在React中構建一個Tour組件，其目的是向用戶介紹Web應用程序的界面。「遊覽」的一部分涉及驗證用戶的行爲（例如，如果當前步驟涉及打開模式，則一旦用戶這樣做，則「遊覽」應當進展，否則如果用戶嘗試通過點擊「下一個'）。沒有突變觀察者的Dom節點插入/刪除

爲此，我需要檢測DOM中的更改（例如打開的模式或出現特定類的div）。我有一些關於連接'onNext'函數的一些想法，一旦用戶與某些目標元素進行交互（例如'Open Modal'按鈕），該函數將繼續進行教程，但是這看起來像是一種破解，我想管理只能通過DOM中存在的實際元素進行瀏覽，而不是通過監聽點擊來實現必要的元素最終顯示。

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

來源

2016-09-18 user3457884

那麼[自定義元素]（https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements）呢？ – Oriol

對於這個任務的範圍，我只考慮預先存在的html元素，假設「自定義元素」是指元素添加到HTMLElement.prototype？ – user3457884

也許劫持像'insertBefore'，'appendChild'，'removeChild'等DOM方法...... – Oriol

我認爲你最好通過實施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 
    } 
}

當用戶沒有參加導遊，只需在減速設定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'}); 
     } 
    } 
}

來源

2016-09-18 20:36:30 gravityplanx

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

回答

相關問題