css - 更改字体大小而不会在 React 中遇到最大 'Maximum update depth exceeded'

Question

我有一个具有特定高度和宽度的 div。

在这个 div 中放置文本时，我希望它的大小恰到好处。这意味着文本足够大，刚好适合 div，但不会溢出。

所以我的逻辑大致是这样的:

calculateFitAndOverflow(){
  // I do some div height and overflow calculations here
  return {
    fit: true, // or false
    overflow: false // or true
  }
}

componentDidMount(){
  var fit_and_overflow = this.calculateFitAndOverflow(); 
  this.setState(fit_and_overflow);
}

componentDidUpdate(){
  if(this.state.fit === false){
    var fit_and_overflow = this.calculateFitAndOverflow();
    this.setState(fit_and_overflow);
  }
}

这很好用，但在某些起始条件下会遇到问题。

当初始字体较小而 div 较大时，setState 必须被调用多次，React 会过早地抛出“超出最大更新深度”。

所以我的问题是:

1. 有没有更好的方法来解决这个问题而不必执行 render -> check height -> adjust -> render 循环？
2. 我可以阻止 React 抛出错误并让它继续吗？

Answer 1

我最终实现了二进制搜索来找到适合的字体，而不是 React 提示的将字体大小线性增加 1。

事实证明，已经有一个专为这个用例构建的 React 库。 https://github.com/malte-wessel/react-textfit/blob/master/src/Textfit.js#L127

我借鉴了二分查找的思想，自己实现了

谢谢大家:)