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

怎么入门数据库编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《如何在项目中优化的展示对话框？》，涉及到MySQL，有需要的可以收藏一下

背景
对话框在前端开发应用中，是一种非常常用的界面模式。对话框作为一个独立的窗口，常常被用于信息的展示，输入信息，亦或者更多其他功能。但是项目的使用过程中，在某些场景下对话框用起来会有一些麻烦。例如：
场景一
如果想要在多个子组件（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 ...></c>
    ) : null
  }
></b></a>

);
}

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

  
    <button onclick="{()"> {
        props.modalVisible(...)
    }} 
  />
></button>

);
}

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

  
    <button onclick="{()"> {
        props.modalVisible(...)
    }} 
  />
></button>

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

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

今天关于《如何在项目中优化的展示对话框？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！