Изменить размер шрифта, не запуская максимальное значение «Максимальная глубина обновления превышена» в React - PullRequest
Новая
       11

Изменить размер шрифта, не запуская максимальное значение «Максимальная глубина обновления превышена» в React

0 голосов
/ 28 декабря 2018

У меня есть 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 от выдачи ошибкии это будет продолжаться?

1 Ответ

0 голосов
/ 28 декабря 2018

В итоге я реализовал бинарный поиск, чтобы найти подгонку шрифта вместо линейного увеличения размера шрифта на 1, на что жаловался React.

Оказывается, уже есть библиотека реагирования, созданная для этого использования.дело.https://github.com/malte-wessel/react-textfit/blob/master/src/Textfit.js#L127

Я позаимствовал идею бинарного поиска и реализовал ее самостоятельно.

Спасибо всем:)

...