React变量写在哪里

一个弹出框多个变量

import { Modal, Button, Divider, message } from 'antd';

interface ModalInfo {
  title: string;
  content: string;
  btnText: string;
  onOk: () => void;
}

const [modal, setModal] = useState<ModalInfo | null>(null)

使用
复制黏贴吧 优快云连个格式化都没有 这样看我代码好丑 我这里是两个按钮调用同一个弹出框

<Button type="primary" onClick={() => {
        console.log(selectedRowsState);
         if (selectedRowsState.length == 0) {
            message.warning('请至少勾选一条数据');
         } else {
            setModal({
               title: '出库分拣确认',
               content: selectedRowsState.length + '个订单已完成分拣并取货',
               btnText: '分拣确认',
               onOk: () => {
                  setModal(null);
               }
		})
}
}}>出库分拣确认</Button>
<Divider type="vertical" />
<Button type="primary" danger onClick={() => {
        console.log(selectedRowsState);
        if (selectedRowsState.length == 0) {
           message.warning('请至少勾选一条数据');
        } else {
          setModal({
           title: '出库分拣退回',
           content: selectedRowsState.length + '个订单需要退回至仓库，重置分拣',
           btnText: '分拣退回',
           onOk: () => {
             setModal(null);
           }
        })
}
}}>出库分拣退回</Button>

Modal
修改弹出框里面的title，content，btnText，onOk 所以 你懂
onCancel关闭事件都一样 所以 你懂？

 <Modal
        title={modal?.title}
        visible={!!modal}
        okText={modal?.btnText}
        onOk={modal?.onOk}
        onCancel={() => {
          setModal(null);
        }}
      >
        <h1>{modal?.content}</h1>
</Modal>

到底啦 啥也没了 看懂了吗？