【问题标题】:How to reduce the font size in ReactJS如何在 ReactJS 中减小字体大小
【发布时间】:2020-12-05 04:11:31
【问题描述】:

每次您在输入中添加或删除数字时,我的应用货币转换器都会更新结果(事件 onChange)。

问题是如果添加一些数字,结果的大小会增加,所以我想在需要时更改字体大小。 (更大或更小取决于)

有什么想法吗?

【问题讨论】:

    标签: html css reactjs


    【解决方案1】:

    我想当我创建一个新的render()时,我会计算字符,并根据我的字符串的长度改变字体大小。

    我这样计算我的新字体大小:

    newSize = parseInt(400/res.length);
    

    在 JSX 渲染中,我这样做了:

    <div className='overflow' id="result" style={{fontSize: newSize+'px'}}>
        {res}
    </div>
    

    【讨论】:

      【解决方案2】:

      我认为你需要启动你的状态:

      const[isBig,setIsBig()] = React.useState(false);
      

      之后,您需要检查结果的大小,并取决于您的输出更新大小为大(您的状态)

      就是这样,如果 isBig true 设置 fontSize :12px 否则 15px 或者我不知道取决于你的需要:

      <span style={isBig ? {fontSize:'12px'} : {fontSize:'15px'}}>your resulsts here </span>
      

      【讨论】:

      • 您还没有解释如何确定何时应将isBig 设置为true
      • 1215 不是 CSS font-size 属性的有效值。
      • 请阅读问题编辑器旁边的格式说明。您已将几乎所有内容都标记为粗体文本(使其难以阅读),并且没有将任何代码标记为代码。
      猜你喜欢
      • 2021-03-27
      • 1970-01-01
      • 1970-01-01
      • 2010-11-14
      • 2020-09-21
      • 2014-11-15
      • 2011-12-17
      • 2016-09-18
      • 1970-01-01
      相关资源
      最近更新 更多