javascript - react 组件 - 在调整 react 元素的大小时更改子内容(当宽度变窄时) - 而不是通过固定断点的窗口大小

Question

我有一个 react 组件，它呈现一个包含一些菜单项元素的 div - 内联 block (全部水平对齐)

带有文本“玩具店”、“配置您的玩具”、“关于我们”

那么如何做到这一点:当窗口大小改变时，我不希望元素相互堆叠，但首先将手册文本更改为“Toys”、“Configure”和“About”父元素无法将它们保持在一行中，因为它不再足够宽(不在固定的窗口断点上)。当空间变得太窄而无法将文本更改为“T”、“C”、“A”时(不要问为什么，它应该是这样的)

既然这不仅是样式的变化，也是内容的变化，那么如何用 react 元素来完成呢？

render () {

    const { theme } = this.props;
    const { classes } = this.props;

    return(
        <div style={{flex: 1}}>
            <Button color="inherit" variant={this.state.btnVar0} onClick={(e) => this.toggleMenuBtns(0,e)}><span className = {classes.menuButtonMed}  >T{this.state.squeeze > 1 ? null : <span      >oy</span>}</span>{this.state.squeeze > 0 ? null : <span> Store</   span>}</Button>
            <Button color="inherit" variant={this.state.btnVar1} onClick={(e) => this.toggleMenuBtns(1,e)}><span className = {classes.menuButtonTreat}>C{this.state.squeeze > 1 ? null : <span>onfigure</span>}</span>{this.state.squeeze > 0 ? null : <span> your Toy</span>}</Button>
            <Button color="inherit" variant={this.state.btnVar2} onClick={(e) => this.toggleMenuBtns(2,e)}><span className = {classes.menuButtonCom}  >A{this.state.squeeze > 1 ? null : <span    >bout</span>}</span>{this.state.squeeze > 0 ? null : <span> Us</      span>}</Button>
        </div>

    );
}

Answer 1

如果您不想依赖预设断点(似乎是这种情况)，那么您唯一的解决方案是计算菜单元素的宽度并将其与客户端窗口的宽度进行比较。如果菜单元素的全局宽度超过窗口的宽度，请使用第一个较短的替代项更新菜单元素的内容，然后是第二个最短的替代项。

您需要在初始渲染和任何窗口调整大小事件中执行此操作。

进行宽度比较的一种方法是结合使用 React Refs、Element.clientWidth 和 window.innerWidth。

至于从一种文本切换到另一种替代文本，我可以想到几种方法(使用 CSS、直接更新文本内容、使用状态和/或 Prop 等)。

我会让你自己制定实现细节。