根据React中容器的变化缩放文本

import React, { useRef, useEffect, useState } from 'react';

const TextScaler = ({ children }) => {
  const containerRef = useRef(null);
  const [fontSize, setFontSize] = useState(16);

  useEffect(() => {
    const resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        const { width } = entry.contentRect;
        // 根据容器宽度动态调整字体大小
        const newFontSize = Math.max(12, Math.min(24, width / 20));
        setFontSize(newFontSize);
      }
    });

    if (containerRef.current) {
      resizeObserver.observe(containerRef.current);
    }

    return () => {
      if (containerRef.current) {
        resizeObserver.unobserve(containerRef.current);
      }
    };
  }, []);

  return (
    <div ref={containerRef} style={{ width: '100%', height: '100%' }}>
      <div style={{ fontSize: `${fontSize}px` }}>{children}</div>
    </div>
  );
};

export default TextScaler;