如何在项目中优化的展示对话框?

背景
对话框在前端开发应用中,是一种非常常用的界面模式。对话框作为一个独立的窗口,常常被用于信息的展示,输入信息,亦或者更多其他功能。但是项目的使用过程中,在某些场景下对话框用起来会有一些麻烦。例如:
场景一
如果想要在多个子组件(A、B)中控制一个对话框(C)的显示影藏,这个对话框必须在共有的父组件(MySalesOrders)中进行声明。
场景二
如果需要给对话框(C)传递参数,一般情况我们会使用 props 传入,意味着状态的管理必须也是子组件(A、B)的父组件或者更高一级进行管理和维护,但是其实这些状态可能只需要在子组件 A 或者 B 中维护。这种情况下,我们就需要自定义事件,将状态进行回传,比较麻烦。
const MySalesOrders: React.FC = () => {
const [visible, setVisible] = React.useState(false);
...
return (

  <>
          
        
    {
    visible ? (
      
    ) : null
  }

);
}

const A: React.FC = (props) => {
...
return (

  <>
    

);
}

const B: React.FC = (props) => {
...
return (

  <>
    

);
}
复制代码
场景三
一个展示的对话框,对话框在不同的模块可能只是提示文案不一样,需要在不同的地方多次导入定义。例如系统中常用的提示成功、提示失败的对话框。
如何在项目中优化的展示对话框?_第1张图片
我们通常会定义一个通用的组件,在父组件中定义,然后使用时唤起,但是如果我们需要在不同的页面使用,我们就需要在不同的页面组件中使用引入定义。
这些场景都是在我在实际开发中都会用到的,并且这些实现方法其实本身来说都是可以正常使用的,也没有什么问题。但是影藏了几个问题。
问题一:难以扩展
如果和 MySalesOrders 同级的组件也要访问这个对话框(C)?又或者, MySalesOrders 下面的某个深层级的孙子组件也要能对话框(C)?前者意味着代码需要重构,继续提升状态到 MySalesOrders 组件的父组件;后者意味着业务逻辑处理更复杂,需要通过层层的自定义事件回调来完成。
问题二:维护问题
同一个组件,需要在不同的地方多次的导入定义。在系统中增加了大量重复的代码。代码很快就会变得臃肿,且难以理解和维护。
问题的本质
对上诉问题来说,本质在于:在我们日常的项目中应该哪里定义去对话框?又该如何和对话框进行数据交互?

你可能感兴趣的