ant-design/components/modal/demo/hooks.md

order	title
12	[{zh-CN 使用 hooks 获得上下文} {en-US Use hooks to get context}]

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);