AntD 组件总结

2024-01-20 19:45:53

记录一些 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>;

AntD 组件总结