Javascript 如果组件溢出，请使用不同的组件

我试图检查一个组件是否溢出，然后使用不同的组件（响应）。内容是动态的，所以我不能使用特定的断点

以下是反应组件：

componentDidMount(){
  const element = this.element;
  this.setState({
    overflow: element.offsetHeight > 50
  });
}

componentWillMount(){
  window.addEventListener('resize', this.handleResize);
}

componentWillUnmount(){
  window.removeEventListener('resize', this.handleResize);
}

handleResize = () => {
  const element = this.element;
  this.setState({
    overflow: element.offsetHeight > 50,
  });
};

render() {
  return (
    <div ref={(el) => {this.element = el}}>
      { this.state.overflow ? smallComponent : bigComponent } 
    </div>
  );
}

componentDidMount（）{
常量元素=this.element；
这是我的国家({
溢出：element.offsetHeight>50
});
}
组件willmount（）{
window.addEventListener（'resize'，this.handleResize）；
}
组件将卸载（）{
window.removeEventListener（'resize'，this.handleResize）；
}
handleResize=（）=>{
常量元素=this.element；
这是我的国家({
溢出：element.offsetHeight>50，
});
};
render（）{
返回(
{this.element=el}}>
{this.state.overflow？smallComponent:bigComponent}
);
}

问题是溢出状态会发生变化，因为如果溢出为真，则is将使用smallComponent，然后下一次渲染它将为假，因为is使用了smallComponent。因此，当我调整窗口大小时，它没有响应，它将从bigComponent来回跳转到smallComponent

---

这是一种更“优雅”的方式来解决我试图做的事情吗？

您不能在事件侦听器中使用

window.innerHeight

，而应始终使用例如

window.innerHeight否，因为内容是动态的，并且应该支持不同的屏幕大小。因此，内容可以是从50px到1000px宽度的所有内容。当然，屏幕可以是平板电脑、pc、4k等。