AntD 组件总结

记录一些 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>;
posted @ 2021-06-23 20:58  kongshu  阅读(469)  评论(0编辑  收藏  举报