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设置为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'});
        }
    }
}

没有突变观察者的Dom节点插入/移除

1 个答案: