2018-03-09 15:02:13 +08:00
|
|
|
---
|
|
|
|
order: 7
|
|
|
|
title:
|
|
|
|
zh-CN: 平滑地卸载
|
|
|
|
en-US: Smoothly Unmount
|
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
2018-09-16 18:36:17 +08:00
|
|
|
平滑、自然的卸载提示。
|
2018-03-09 15:02:13 +08:00
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
2019-04-19 20:48:29 +08:00
|
|
|
Smoothly unmount Alert upon close.
|
2018-03-09 15:02:13 +08:00
|
|
|
|
2020-01-21 16:21:37 +08:00
|
|
|
```tsx
|
2018-03-09 15:02:13 +08:00
|
|
|
import { Alert } from 'antd';
|
2022-05-23 14:37:16 +08:00
|
|
|
import React, { useState } from 'react';
|
2018-03-09 15:02:13 +08:00
|
|
|
|
2020-01-21 17:14:58 +08:00
|
|
|
const App: React.FC = () => {
|
2020-01-22 12:11:49 +08:00
|
|
|
const [visible, setVisible] = useState(true);
|
2022-05-19 09:46:26 +08:00
|
|
|
|
2020-01-21 16:21:37 +08:00
|
|
|
const handleClose = () => {
|
|
|
|
setVisible(false);
|
2019-05-07 14:57:32 +08:00
|
|
|
};
|
2022-05-19 09:46:26 +08:00
|
|
|
|
2020-01-21 16:21:37 +08:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{visible ? (
|
|
|
|
<Alert message="Alert Message Text" type="success" closable afterClose={handleClose} />
|
|
|
|
) : null}
|
|
|
|
<p>placeholder text here</p>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
2018-03-09 15:02:13 +08:00
|
|
|
|
2022-04-15 16:20:56 +08:00
|
|
|
export default App;
|
2019-05-07 14:57:32 +08:00
|
|
|
```
|