Reactjs 相对于React中的容器进行更改时缩放文本

我使用的是React.js，我希望输入的文本能够适合它的容器，但是一旦更改

例如：如果用户输入“T”

然后他输入“E”，所以现在的输入是“TE”

---

请帮我做这个？在广告中表示感谢：）

我创建了一个小应用程序来演示这个。我使用了两个state

text

来管理文本框中的当前文本，以及一个

fontSize

来计算文本的当前字体大小。我保留了200px的上限和50px的下限，这样文本看起来就不会太大或太小。比率为

1.2

，这意味着每当添加新字符时，文本大小将增加到1.2，如果删除字符，则大小将减少1.2。这是一份申请表

import React, { useState, useCallback } from "react";

export default function App() {
  const [fontSize, setFontSize] = useState(200);
  const [text, setText] = useState("");
  const updateFontSize = useCallback(
    (value) => {
      if (text.length > value.length) {
        const textSize = Math.ceil(fontSize * 1.5, 10);
        fontSize < 200 && setFontSize(textSize);
      } else if (text.length < value.length) {
        const textSize = Math.ceil(fontSize / 1.5, 10);
        fontSize > 50 && setFontSize(textSize);
      }
      setText(value);
    },
    [fontSize, text]
  );
  return (
    <div className="App">
      <input
        type="text"
        onChange={(event) => updateFontSize(event.target.value)}
      />
      <div style={{ fontSize: `${fontSize}px` }}>{text}</div>
    </div>
  );
}

import React，{useState，useCallback}来自“React”；
导出默认函数App（）{
常量[fontSize，setFontSize]=useState（200）；
const[text，setText]=useState（“”）；
const updateFontSize=useCallback(
（值）=>{
如果（text.length>value.length）{
const textSize=Math.ceil（fontSize*1.5,10）；
fontSize<200&&setFontSize（textSize）；
}else if（text.length50&&setFontSize（文本大小）；
}
setText（值）；
},
[字体大小，文本]
);
返回(
updateFontSize（event.target.value）}
/>
{text}
);
}

这里有一个代码沙盒供您参考