记录一些 antd 组件的功能
- PortalComponent vs Portal 前者会创建一个 div, 然后 attach 这个 div 到 getContainer 的 DOM 中去,如果没有提供就直接 attach 到 body, 同时它还有第二个功能,就是禁用 attach 的组件的 scroll 功能,也就是说 body,或者父级容器,会 overflow:hidden, 关闭时会恢复。
width:calc(100% - scrollbar-width)
。
Portal 的就单纯多了,只是简单的调用 ReactDOM.createPortal()。
- Dialog 里面有个有意思的 memo 组件,代码如下:
export type MemoChildrenProps = {
shouldUpdate: boolean;
children: React.ReactNode;
};
export default React.memo(
({ children }: MemoChildrenProps) => children as React.ReactElement,
(_, { shouldUpdate }) => !shouldUpdate
);
// 这个时使用就当component 组件用.
<MemoChildren shouldUpdate={visible || forceRender}>
{modalRender ? modalRender(content) : content}
</MemoChildren>;