Modal 是后台管理系统的三大重要组件之一
怎么才算正确使用 Modal 引发很多前端开发人员的讨论~
下面是基于 Ant Design 组件库说一下两种使用方式
声明式 Modal
声明式 Modal 是指组件的显示由某个"状态"来控制,通过行为控制状态的值来控制的组件的显示与隐藏,对象是"状态"
事件控制状态,状态控制 Modal。也就是下面的使用逻辑
visible && <Modal/>
使用 Ant Design 举个例子:
import React, { useState } from 'react';
import { Button, Modal } from 'antd';
const App: React.FC = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const showModal = () => {
setIsModalOpen(true);
};
const handleOk = () => {
setIsModalOpen(false);
};
const handleCancel = () => {
setIsModalOpen(false);
};
return (
<>
<Button type="primary" onClick={showModal}>
Open Modal
</Button>
<Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
</>
);
};
export default App;
命令式 Modal
命令式编程强调的是发出命令,告诉程序去执行某些操作。在命令式的模式下,开发者手动控制模态框的显示和隐藏,通常不依赖于状态驱动,而是通过调用函数或方法来直接控制模态框的行为。强调的对象是事件
命令式 Modal 允许你从外部代码直接控制模态框的显示和关闭,这通常是通过访问和操作模态框实例或引用来实现的
Modal 的逻辑在事件里
使用 Ant Design 举个例子:
import React from 'react';
import { Button, Modal, Space } from 'antd';
const handleClick = () => {
Modal.info({
title: 'This is a notification message',
content: (
<div>
<p>some messages...some messages...</p>
<p>some messages...some messages...</p>
</div>
),
});
};
const App: React.FC = () => (
<Space wrap>
<Button onClick={handleClick}>Info</Button>
</Space>
);
export default App;
总结
技术没有对错之分,只管合适与否。请结合实际业务需求选择 Modal 的使用方式