mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
01b98e79d9
* docs: optimize site of components in rtl 3 * add
1.7 KiB
1.7 KiB
order | title | ||||
---|---|---|---|---|---|
12 |
|
zh-CN
通过 Modal.useModal
创建支持读取 context 的 contextHolder
。
en-US
Use Modal.useModal
to get contextHolder
with context accessible issue.
import { Modal, Button, Space } from 'antd';
const ReachableContext = React.createContext();
const UnreachableContext = React.createContext();
const config = {
title: 'Use Hook!',
content: (
<div>
<ReachableContext.Consumer>{name => `Reachable: ${name}!`}</ReachableContext.Consumer>
<br />
<UnreachableContext.Consumer>{name => `Unreachable: ${name}!`}</UnreachableContext.Consumer>
</div>
),
};
const App = () => {
const [modal, contextHolder] = Modal.useModal();
return (
<ReachableContext.Provider value="Light">
<Space>
<Button
onClick={() => {
modal.confirm(config);
}}
>
Confirm
</Button>
<Button
onClick={() => {
modal.warning(config);
}}
>
Warning
</Button>
<Button
onClick={() => {
modal.info(config);
}}
>
Info
</Button>
<Button
onClick={() => {
modal.error(config);
}}
>
Error
</Button>
</Space>
{/* `contextHolder` should always under the context you want to access */}
{contextHolder}
{/* Can not access this context since `contextHolder` is not in it */}
<UnreachableContext.Provider value="Bamboo" />
</ReachableContext.Provider>
);
};
ReactDOM.render(<App />, mountNode);