# PopupContainerProvider

向子树提供弹出框（popup）容器的组件

组件本身不会产生 DOM 节点，使用时通过指定 `containerRef` 或 `getContiner` 函数，可以控制子树中的弹出框（popup）挂载到特定的 DOM 节点下。由于弹出框的 `position` 是 `absolute`，被挂载的DOM节点的 `position` 不能是 `static`，建议设成 `relative`，参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block

上边提到的“弹出框（popup）”包括 `Select`、`DatePicker`、`Cascader` 等组件的下拉框，`Tooptip` 组件的弹出浮层等，**不包括** `Modal`、`Dialog` 等组件的的弹出浮层

# Usage

## With Ref

你可以通过 `containerRef` 传入 DOM 节点对应的 React Ref 对象来指定容器

<code src="./demos/with-ref.tsx"></code>

## With Callback

如果作为容器的 DOM 节点没有维护在 React Ref 对象中，你也可以通过 `getContainer` 传入获取 DOM 节点的函数；为了避免子树中组件不必要的 render，建议将函数通过类似 `useCallback` 的手段进行 memo 后再传入

<code src="./demos/with-callback.tsx"></code>

<API src="./PopupContainerProvider.tsx" exports='["default"]'></API>