关于mysql:如何在项目中优化的展示对话框

36次阅读

共计 1144 个字符，预计需要花费 3 分钟才能阅读完成。

背景
对话框在前端开发利用中，是一种十分罕用的界面模式。对话框作为一个独立的窗口，经常被用于信息的展现，输出信息，亦或者更多其余性能。然而我的项目的应用过程中，在某些场景下对话框用起来会有一些麻烦。例如：
场景一
如果想要在多个子组件（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 组件的父组件；后者意味着业务逻辑解决更简单，须要通过层层的自定义事件回调来实现。
问题二：保护问题
同一个组件，须要在不同的中央屡次的导入定义。在零碎中减少了大量反复的代码。代码很快就会变得臃肿，且难以了解和保护。
问题的实质
对上诉问题来说，实质在于：在咱们日常的我的项目中应该哪里定义去对话框？又该如何和对话框进行数据交互？

正文完