mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 13:59:11 +08:00
d02c486052
* init hooks * portal it in * children with 2 context demo * Remove config since not more second demo * Quit with same Component for logic reuse * add rest functions * use localeReceiver * use localeReceiver * update test case * fix lint * update docs * update demo title
1.6 KiB
1.6 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 } 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">
<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>
{/* `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);