React组件响应式：父元素Resize时动态调整按钮标签状态

这个需求本质上是做响应式的按钮文本收缩，核心思路就是精准监听父容器的宽度变化，在按钮即将挤成垂直排列前，触发文本收缩的状态切换。下面是具体的实现步骤和代码示例：

核心思路拆解 #

我们需要实时对比「父容器的可用宽度」和「三个按钮的总渲染宽度」，当容器宽度不足以容纳所有按钮的完整文本时，逐步触发squeeze状态变更，提前收缩文本避免按钮堆叠。

具体实现步骤 #

1. 给父容器绑定Ref #

首先要能获取到父容器的DOM元素，这样才能读取它的尺寸。在类组件里可以用createRef：

constructor(props) {
  super(props);
  this.state = {
    squeeze: 0,
    btnVar0: 'text',
    btnVar1: 'text',
    btnVar2: 'text'
  };
  // 创建父容器的ref
  this.containerRef = React.createRef();
  this.resizeObserver = null;
}

然后在渲染的父div上绑定这个ref：

<div ref={this.containerRef}>
  {/* 你的三个按钮 */}
</div>

2. 用ResizeObserver监听容器尺寸变化 #

传统的window.resize只能监听整个窗口的变化，没法处理父容器被其他元素（比如侧边栏）挤压导致宽度变化的场景。ResizeObserver是专门监听元素尺寸变化的API，精准度更高。

在组件挂载时初始化监听：

componentDidMount() {
  this.resizeObserver = new ResizeObserver(entries => {
    // 获取容器的当前宽度
    const containerWidth = entries[0].contentRect.width;
    // 获取三个按钮的DOM元素
    const buttons = this.containerRef.current.querySelectorAll('button');
    // 计算三个按钮的总宽度之和
    const totalBtnWidth = Array.from(buttons).reduce((sum, btn) => sum + btn.offsetWidth, 0);
    
    // 设置缓冲值，避免临界宽度时状态频繁切换（抖动）
    const buffer = 10;
    let newSqueeze = 0;

    // 判断容器宽度是否足够
    if (containerWidth < totalBtnWidth + buffer) {
      // 先切换到半收缩状态（squeeze=1）
      newSqueeze = 1;
      // 如果半收缩后还是不够，切换到全收缩（squeeze=2）
      // 这里可以根据实际收缩后的按钮宽度调整判断逻辑，比如用预估的宽度或者实际计算
      if (containerWidth < totalBtnWidth * 0.6 + buffer) {
        newSqueeze = 2;
      }
    }

    // 只有当状态变化时才更新，避免不必要的重渲染
    if (newSqueeze !== this.state.squeeze) {
      this.setState({ squeeze: newSqueeze });
    }
  });
  // 开始监听父容器
  this.resizeObserver.observe(this.containerRef.current);
}

3. 组件卸载时清理监听 #

为了避免内存泄漏，一定要在组件卸载时断开ResizeObserver：

componentWillUnmount() {
  if (this.resizeObserver) {
    this.resizeObserver.disconnect();
  }
}

完整渲染代码 #

把你的按钮代码放到绑定了ref的父容器里即可：

return(
  <div ref={this.containerRef}>
    <Button color="inherit" variant={this.state.btnVar0} onClick={(e) => this.toggleMenuBtns(0,e)}>
      <span className={classes.menuButtonMed}>
        M{this.state.squeeze > 1 ? null : <span>ed</span>}
      </span>
      {this.state.squeeze > 0 ? null : <span>icine</span>}
    </Button>
    <Button color="inherit" variant={this.state.btnVar1} onClick={(e) => this.toggleMenuBtns(1,e)}>
      <span className={classes.menuButtonTreat}>
        D{this.state.squeeze > 1 ? null : <span>ia</span>}
      </span>
      {this.state.squeeze > 0 ? null : <span>gnose</span>}
    </Button>
    <Button color="inherit" variant={this.state.btnVar2} onClick={(e) => this.toggleMenuBtns(2,e)}>
      <span className={classes.menuButtonCom}>
        W{this.state.squeeze > 1 ? null : <span>ell</span>}
      </span>
      {this.state.squeeze > 0 ? null : <span>ness</span>}
    </Button>
  </div>
);

额外注意事项 #

• 如果是函数组件，用法类似：用useRef创建容器ref，用useEffect初始化和清理ResizeObserver。
• 缓冲值可以根据实际UI调整，比如设为20px，确保在按钮即将堆叠前就触发收缩。
• 你也可以优化按钮宽度的计算方式，比如提前预估不同收缩状态下的按钮宽度，减少DOM读取的次数，提升性能。

内容的提问来源于stack exchange，提问作者haemse