Question

我想拥有一个全局的Modal Component（为了进行对话，我们将其称为包装器，这意味着它在屏幕中央呈现了一个白框，在背景周围呈灰色），它实质上显示了不同的嵌套模态和由redux状态控制，也可以通过调度的动作进行切换。困难的部分是我不能简单地将这些模式硬编码到父组件中，并根据操作有效负载（例如modalType属性）在它们之间进行切换，因为由于应用程序的需求，我需要以某种方式将回调传递给其中一些嵌套的回调模态，因此他们知道用户在给定情况下单击“是/确定”时的行为。而且，此行为也有所不同，具体取决于当前上下文。有时按OK表示调度一系列其他动作，有时按导航到另一个页面等。本质上，所需的功能是以某种方式“继续”由模态外观冻结的过程。是否有一个内置机制可以以某种方式允许一种不违反良好实践和React架构的通用方法？我不想将回调保留在redux存储中，也不想将整个组件作为操作参数传递并将包装器链接到状态。后者是我加入该项目时在应用程序中找到的当前解决方案，我想对其进行重构，因为它被视为反模式。是否有可能以某种方式引用从中调用showModal动作的组件，然后操纵其内部方法？

这是我要更改的当前解决方案的代码：

//actions

export function showModalDialog(component: React.ReactNode, overrideStyles?: boolean, fullScreen?: boolean): AnyAction {
  return {
    type: SHOW_GLOBAL_MODAL_DIALOG,
    value: component,
    fullScreen,
    overrideStyles,
  };
}

export function closeModalDialog(): AnyAction {
  return {
    type: CLOSE_GLOBAL_MODAL_DIALOG,
  };
}

//interface

export interface ModalDialog {
  open: boolean;
  component?: React.ReactNode;
  fullScreen?: boolean;
  overrideStyles?: boolean;
}

//Parent Modal Component

const  ModalDialog = ({overrideStyles, classes, component, fullScreen, open}: ModalDialogProps): React.ReactElement<ModalDialogProps> => {

  const setDialogStyle = (): any => (
    {
      paper: overrideStyles ? classes.paper : 'inherit',
    }
  );
  return (
      <Dialog
        id={'global_dialog'}
        fullScreen={fullScreen}
        open={open}
        classes={setDialogStyle()}
      >
        <>
          {component !== undefined ? component : ''}
        </>
      </Dialog>
    );
};

function storeToProps(store: AppStore): ModalDialogPropsFromStore {
  return {
    open: store.modalDialog.open,
    fullScreen: store.modalDialog.fullScreen,
    component: store.modalDialog.component,
    overrideStyles: store.modalDialog.overrideStyles,
  };
}

如何在React的全局组件中使用不同的回调函数处理许多模式类型

0 个答案: