react中封装组件对三方库或者已有ui组件进行自动调整大小嵌入显示区域

原因:有些三方库的组件或者已有的组件ui部分无法调整大小,比如组件是全屏覆盖显示但是在新开发的迭代要求缩小到部分区域显示

解决方法:使用css的属性transform scale,通过绝对定位处理放大或者缩小的处理区域

ini 复制代码
import React, {
  FC, useEffect, useRef, useState,
} from 'react';
import { useSize } from 'ahooks';
import { isEmpty, min } from 'lodash';
import { css } from '@emotion/css';

interface Props {
  debug?: boolean
  lockMaxWidth?: boolean
  lockMaxHeight?: boolean
}

export const AutoScale: FC<React.PropsWithChildren & Props> = ({ children, debug, lockMaxHeight = true, lockMaxWidth = true }) => {
  const outsideWrapperRef = useRef<HTMLDivElement>(null);
  const insideWrapperRef = useRef<HTMLDivElement>(null);
  const outsideSize = useSize(outsideWrapperRef.current?.parentElement);
  const insideSize = useSize(insideWrapperRef);
  const [scale, setScale] = useState(1);
  const [height, setHeight] = useState(0);
  const [width, setWidth] = useState(0);

  useEffect(() => {
    if (isEmpty(insideSize) || isEmpty(outsideSize)) {
      return;
    }
    if (debug) {
      console.log(outsideSize);
    }

    const scaleWidth = outsideSize.width / insideSize.width;
    const scaleHeight = outsideSize.height / insideSize.height;
    let resultScale;

    switch (true) {
      case lockMaxWidth && !lockMaxHeight:
        resultScale = scaleWidth;
        break;
      case !lockMaxWidth && lockMaxHeight:
        resultScale = scaleHeight;
        break;
      case lockMaxWidth && lockMaxHeight:
        resultScale = min([scaleWidth, scaleHeight]);
        break;
      default:
        resultScale = scaleWidth;
        break;
    }

    setScale(resultScale);
    setHeight(insideSize.height * resultScale);
    setWidth(insideSize.width * resultScale);
  }, [insideSize, outsideSize]);

  return (
    <div
      ref={outsideWrapperRef}
      className={css`
          position: relative;
          width: ${`${width}px` || '100%'};
          height: ${`${height}px` || '100%'};
          overflow: ${width ? 'initial' : 'hidden'};
      `}
    >
      <div
        ref={insideWrapperRef}
        className={css`
          position: absolute;
          top: 0;
          left: 0;
          transform-origin: left top;
          transform: scale(${scale});
      `}
      >
        {children}
      </div>
    </div>
  );
};
相关推荐
Lazy_zheng2 小时前
React架构深度解析:从 Stack 到 Fiber,解决 CPU 和 I/O 瓶颈问题
前端·react.js·前端框架
WildBlue2 小时前
React 遇上原子 CSS:前端开发的超级进化 🚀
前端·react.js
namehu2 小时前
“c is not a function” - 一次由 useEffect 异步函数引发的 React 底层崩溃分析
前端·javascript·react.js
iaku3 小时前
🔥React工程化实践:构建企业级可维护应用架构
前端·react.js·前端框架
晓得迷路了4 小时前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
今禾18 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
我想说一句19 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
码间舞19 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
爱编程的喵1 天前
深入理解JSX:从语法糖到React的魔法转换
前端·react.js
海底火旺1 天前
单页应用路由:从 Hash 到懒加载
前端·react.js·性能优化