Antd 封装Modal

最新推荐文章于 2025-04-09 10:23:31 发布

big tail

最新推荐文章于 2025-04-09 10:23:31 发布

阅读量1.3k

点赞数

分类专栏： js react

本文链接：https://blog.youkuaiyun.com/qq_37698249/article/details/111234898

版权

react 同时被 2 个专栏收录

12 篇文章

订阅专栏

10 篇文章

订阅专栏

本文档展示了如何使用Ant Design(Antd)库封装一个包含Steps的Modal组件，并在父组件中调用该组件。子组件通过设置Modal的`visible`属性为`true`来显示弹窗，包含`选择任务项`和`抽奖次数设置`两个步骤。父组件通过条件渲染触发子组件的显示，并提供关闭和确认操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Antd 封装Modal

// 子组件
// Modal的visible直接设为true
const { title, onClose } = this.props;
<Modal
	title={title}
	visible={true}
	onOk={this.handleOkDraw}
	onCancel={onClose}
	maskClosable={false}
>
	<Form>
		<Steps status="wait" size="small" direction="vertical">
			<Step title="选择任务项" description={selectTask} />
			<Step title="抽奖次数设置" description={setDrawNum} />
		</Steps>
	</Form>
</Modal>

**************************************************************
// 父组件
{addDrawVisible && (
	<AddDrawModal
		title="新增抽奖次数赠送规则"
		onClose={this.onAddDrawClose}
		onOk={this.onAddDrawOk}
	/>
)}