检查内容是否溢出 div：有没有比使用窗口调整大小事件更有效的方法？

编程问答 2022-05-29

问题描述

我有一个 React 应用程序，它保存一长串时间条目（基本上只是包含文本的 div）。当组件安装时，每次在 for 循环中检查 entry 元素是否有文本溢出。如果内容溢出，则会呈现“展开”按钮。

然而，当调整窗口大小时，这代表了一个挑战，因为不会重新检查时间条目。我目前的解决方案是使用窗口调整大小事件：每当屏幕调整大小时，每次都会再次检查条目是否溢出。

有没有更有效的方法来解决这个问题？


class TimeEntry extends React.Component {
   componentDidMount = () => {
     window.addEventListener("resize",this.resize.bind(this));
     this.adjustTimeEntryHeight();
   };

  componentwillUnmount = () => {
    window.removeEventListener("resize",this.resize.bind(this));
  }

  resize() {
    this.adjustTimeEntryHeight();
  }

  // check if time entry exceeds 200px. If so,display the hidden content. If not,hide the 
  // content if it isn't already hidden.
  adjustTimeEntryHeight = () => {
    var time_entry_rows = document.getElementsByClassName('time_entry_row_container');
    for (var i = 0; i < time_entry_rows.length; i++) {
      if (time_entry_rows[i].clientHeight >= ENTRY_ROW_MAX_HEIGHT) {
         time_entry_rows[i].getElementsByClassName('fixBottom')[0].classList.remove('hidden');
      } else if (!time_entry_rows[i].getElementsByClassName('hidden')) {
        time_entryRows[i].getElementsByClassName('fixBottom')[0].classList.add('hidden');
      }
    }
  }

  ....

}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptperformancereactjsreactjswindow-resize