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

Question

我正在尝试检查某个组件是否溢出，然后使用其他组件（响应）。内容是动态的，所以我不能使用特定的断点。

这是反应成分：

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>
  );
}

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

解决我要尝试的事情是否更“优雅”？