Javascript react组件-更改react元素大小时的子内容（当宽度变窄时）-而不是通过固定断点更改窗口大小

我有一个react组件，它用一些包含菜单项元素的元素呈现div-inline block（全部水平对齐）

文字为“玩具商店”、“配置您的玩具”、“关于我们”

那么如何做到这一点：当窗口大小改变时，我不希望项目彼此堆叠，但首先将manu文本更改为“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>

    );
}

render（）{
const{theme}=this.props；
const{classes}=this.props；
返回(
this.toggleMenuBtns（0，e）}>T{this.state.squence>1？null:oy}{this.state.squence>0？null:Store}
this.toggleMenuBtns（1，e）}>C{this.state.squence>1？null:onfigure}{this.state.squence>0？null:your Toy}
this.toggleMenuBtns（2，e）}>A{this.state.squence>1？null:bout}{this.state.squence>0？null:Us}
);
}

您可以使用引导实现它。 工作代码：

<ul className="nav navbar-nav">
        <li>
          <a>
            <span className="hidden-lg">Toys</span>
            <span className="hidden-xs">Toy Store</span>
          </a>
        </li>
        <li>
          <a>
            <span className="hidden-lg">Configure</span>
            <span className="hidden-xs">Configure your Toy</span>
          </a>
        </li>
        <li>
          <a>
            <span className="hidden-lg">About</span>
            <span className="hidden-xs">About Us</span>
          </a>
        </li>
      </ul>

玩具
玩具店


配置
配置你的玩具


关于
关于我们

这是我的解决方案

通过调整输出窗口的大小来检查JSFIDLE

这并不完美，但它会给你一个起点

基本上，我使用css

content:attr（attib name）

来实现这一点

我做了三种姿势数据小，数据中等，数据大

 <div data-small="T" data-med="Toys" data-big="Toys Stuff" class="inline"></div>

设置不同的值

*{
框大小：边框框；
}
身体{
填充：20px；
}
.parent{}
.内联{
边框：1px纯黑；
显示：内联块；
最小宽度：50px；
位置：相对位置；
填充物：5px10px；
}
.inline:之后{
内容：attr（大数据）；
显示：块；
文本对齐：居中；
}
@介质（最大宽度：768px）{
.inline:之后{
内容：attr（数据医学）；
}
}
@介质（最大宽度：500px）{
.inline:之后{
内容：attr（数据量小）；
}
}

---

如果您不想依赖预设断点（看起来是这样），那么您唯一的解决方案就是计算菜单元素的宽度，并将其与客户端窗口的宽度进行比较。如果菜单元素的全局宽度超过窗口的宽度，请使用第一个较短的选项更新菜单元素的内容，然后使用第二个较短的选项更新菜单元素的内容

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

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

至于从一个文本替换到另一个文本，我可以想到几种方法（使用CSS、直接更新文本内容、使用状态和/或道具等）

---

我将让您自己制定实施细节。

这不是与预定义的断点有关，而是与“不再适合水平”事件有关吗？我认为我们可以随时使用媒体查询并根据需要进行定制。是的，但这是我的观点-取决于项目内容的宽度，我不想让它直接依赖于窗口大小，我想让它作为一个独立的元素。谁知道在单个网站布局配置中，项目将开始包装的窗口大小？你知道我的意思吗？这是一个纯css的方法。然而，我希望它只依赖于一个值——当父元素的宽度很小，所以子元素开始垂直包裹时。谁知道这种情况何时会发生在单个网站布局上？我们希望react元素是一个独立的解决方案。那么孩子们的类型是什么？只发短信？或者可能是另一种反应元素？Fi。就像这个更新的Q描述很好的解释，我认为重要的关键词都提到了。我也在研究这个问题，所以我会在下面添加一些参考资料。这可能是另一种想法，由jQuery实现，但我猜它类似于调整事件大小的方式；我们需要克隆原始组件，并将克隆的组件（宽度永远不会变小）与当前组件进行比较。顺便说一句，我不建议使用jQuery，但我们仍然可以尝试使用React API克隆元素并比较元素。resize event方法也非常令人信服。希望OP能找到一个好的解决方案。是的，为了有一个独立的React组件，在不知道页面结构的情况下，你不能真正计算容器“childrens-wrapping断点”，因为谁知道该组件的左和右是什么。。。可能更好的方法是使用react元素的父元素。。。因为这是一个很好的解决办法，我不确定我是否应该这样做。然而，我在这里看到了一个系统性的问题，因为在这种情况下，如果您真的想在真正的阈值上更改内容，您将始终依赖于根据您的内容定制的预设css断点。

.inline:after {
  content: attr(data-big);
  display: block;
  text-align: center;

}

@media(max-width:768px) {
  .inline:after {
    content: attr(data-med);
  }
}

@media(max-width:500px) {
  .inline:after {
    content: attr(data-small);
  }
}