背景

对话框在前端开发应用中，是一种非常常用的界面模式。对话框作为一个独立的窗口，常常被用于信息的展示，输入信息，亦或者更多其他功能。但是项目的使用过程中，在某些场景下对话框用起来会有一些麻烦。例如：

场景一

如果想要在多个子组件（A、B）中控制一个对话框（C）的显示影藏，这个对话框必须在共有的父组件（MySalesOrders）中进行声明。

场景二

如果需要给对话框（C）传递参数，一般情况我们会使用 props 传入，意味着状态的管理必须也是子组件（A、B）的父组件或者更高一级进行管理和维护，但是其实这些状态可能只需要在子组件 A 或者 B 中维护。这种情况下，我们就需要自定义事件，将状态进行回传，比较麻烦。

const MySalesOrders: React.FC = () => {
  const [visible, setVisible] = React.useState(false);
  ...
  return (
  	<>
    	<A modalVisible={setVisible}/>      
			<B modalVisible={setVisible}/>
    	{
        visible ? (
          <C
            ...
          />
        ) : null
      }
    </>
  );
}

const A: React.FC = (props) => {
  ...
  return (
  	<>
    	<Button 
        onClick={() => {
            props.modalVisible(...)
        }} 
      />
    </>
  );
}

const B: React.FC = (props) => {
  ...
  return (
  	<>
    	<Button 
        onClick={() => {
            props.modalVisible(...)
        }} 
      />
    </>
  );
}
复制代码

场景三

一个展示的对话框，对话框在不同的模块可能只是提示文案不一样，需要在不同的地方多次导入定义。例如系统中常用的提示成功、提示失败的对话框。

我们通常会定义一个通用的组件，在父组件中定义，然后使用时唤起，但是如果我们需要在不同的页面使用，我们就需要在不同的页面组件中使用引入定义。

这些场景都是在我在实际开发中都会用到的，并且这些实现方法其实本身来说都是可以正常使用的，也没有什么问题。但是影藏了几个问题。

问题一：难以扩展

如果和 MySalesOrders 同级的组件也要访问这个对话框（C）？又或者， MySalesOrders 下面的某个深层级的孙子组件也要能对话框（C）？前者意味着代码需要重构，继续提升状态到 MySalesOrders 组件的父组件；后者意味着业务逻辑处理更复杂，需要通过层层的自定义事件回调来完成。

问题二：维护问题

同一个组件，需要在不同的地方多次的导入定义。在系统中增加了大量重复的代码。代码很快就会变得臃肿，且难以理解和维护。

问题的本质

对上诉问题来说，本质在于：在我们日常的项目中应该哪里定义去对话框？又该如何和对话框进行数据交互？