响应组件响应 - 在主渲染元素上更改状态调整大小

Question

有一个react.js组件，它在AppBar上呈现3个水平对齐的按钮。

菜单标签在状态更改时会缩短，但是，当父div元素大小发生变化时，如何在子元素（按钮）开始垂直对齐之前更改这些状态​​（堆叠在一起，而不是对齐）水平）？所以基本上它是关于捕捉主要div元素的事件，而不是广泛使用按钮水平对齐。

完成我打算做什么的正确方法是什么？

return(
    <div>
        <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>
);