自定义Modal visible Hook

场景

页面中使用多个 Modal 弹出对话框，每个对话框都要单独维护一个 visible onOk onCancel

弹框关闭和确认都需求回调函数

const [visible1, setVisible1] = useState(false)
const [visible2, setVisible2] = useState(false)
const [visible3, setVisible3] = useState(false)

function handleOk1(/* do somethine */)
function handleCancel1(/* do somethine */)

function handleOk2(/* do somethine */)
function handleCancel2(/* do somethine */)

function handleOk3(/* do somethine */)
function handleCancel3(/* do somethine */)
// Modal 1
<Modal
  visible={visible1}
  onOk={handleOk1}
  onCancel={handleCancel1}
</Modal>
// Modal 2
<Modal
  visible={visible2}
  onOk={handleOk2}
  onCancel={handleCancel2}
</Modal>
// Modal 3
<Modal
  visible={visible3}
  onOk={handleOk3}
  onCancel={handleCancel3}
</Modal>

逻辑代码重复，使用 react hook 复用逻辑

Hook 代码

文件 useVisible.ts

import { useState } from 'react'

/**
 * 自定义Modal visible Hook
 * @param initialState
 * @param onOk
 * @param onCancel
 * @returns
 */
const useVisible = (initialState: boolean, onOk?: Function, onCancel?: Function) => {
  const [visible, setVisible] = useState(initialState)

  const toggle = () => setVisible(!visible)

  return {
    visible,
    toggle,
    onOk: () => {
      toggle()
      if (onOk) {
        onOk()
      }
    },
    onCancel: () => {
      toggle()
      if (onCancel) {
        onCancel()
      }
    }
  }
}

export default useVisible

使用

const addIndependOrg = useVisible(false, () => {/* do somethine */}, () => {/* do somethine */})
const adminSetting = useVisible(false)
const appPowerSetting = useVisible(false)

// modal 组件一
<Modal {...appPowerSetting}>
  <a
    onClick={() => {
      appPowerSetting.toggle()
    }}
  >
    点击打开 Modal 一
  </a>
</Modal>

// // modal 组件二
<Modal {...adminSetting}>
  <a
    onClick={() => {
      adminSetting.toggle()
    }}
  >
    点击打开 Modal 二
  </a>
</Modal>

// // modal 组件三
<Modal {...addIndependOrg}>
  <Button type="primary" onClick={addIndependOrg.toggle}>
    点击打开 Modal 三
  </Button>
</Modal>

看起来逻辑紧凑一点