0037. 学习 antd Message 组件的使用
- 1. 🔗 Message 全局提示
- 2. 💻 demos.1 - 了解 Message 的基本使用
- 3. 💻 demos.2 - 理解 contextHolder 的作用
- 4. 🔗 来自官方文档的回复：为什么 message 不能获取 context、redux 的内容和 ConfigProvider 的 locale/prefixCls/theme 等配置？
1. 🔗 Message 全局提示
2. 💻 demos.1 - 了解 Message 的基本使用
jsx
import React from 'react';
import { Button, message } from 'antd';
const App = () => {
const [messageApi, contextHolder] = message.useMessage();
const info = () => {
messageApi.info('Hello, Ant Design!');
};
return (
<>
{contextHolder}
<Button type="primary" onClick={info}>
Display normal message
</Button>
</>
);
};
export default App;
3. 💻 demos.2 - 理解 contextHolder 的作用
jsx
// 写法1：不用 {contextHolder}
import React from 'react';
import { message, ConfigProvider, Button } from 'antd';
const App = () => {
const showMessage = () => {
message.success('This is a success message');
};
return (
<ConfigProvider theme={{ token: { colorSuccess: '#008c8c' } }}>
<Button onClick={showMessage}>Show Message</Button>
</ConfigProvider>
);
};
export default App;
// 写法2：使用 {contextHolder}
// import React from 'react';
// import { message, ConfigProvider, Button } from 'antd';
// const App = () => {
// const [messageApi, contextHolder] = message.useMessage();
// const showMessage = () => {
// messageApi.success('This is a success message');
// };
// return (
// <ConfigProvider theme={{ token: { colorSuccess: '#008c8c' } }}>
// {contextHolder}
// <Button onClick={showMessage}>Show Message</Button>
// </ConfigProvider>
// );
// };
// export default App;- 写法1：不用
{contextHolder}，最终渲染的消息颜色还是使用默认值，我们在ConfigProvider中配置的颜色不生效。 - 写法2：使用
{contextHolder}，此时ConfigProvider中的配置才生效。 
