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

import React from 'react';

class TextContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      containerWidth: 0,
      fontSize: 16 // 初始字体大小
    };
    this.containerRef = React.createRef();
  }

  componentDidMount() {
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }

  handleResize = () => {
    const containerWidth = this.containerRef.current.offsetWidth;
    this.setState({ containerWidth });
  };

  render() {
    const { containerWidth, fontSize } = this.state;
    const scaleFactor = containerWidth / 200; // 调整缩放比例，根据实际情况调整
    const scaledFontSize = fontSize * scaleFactor;

    return (
      <div ref={this.containerRef}>
        <p style={{ fontSize: scaledFontSize }}>
          这是要缩放的文本
        </p>
      </div>
    );
  }
}

export default TextContainer;