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

---
order: 12
title:
  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.

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