компонент реагирования - изменение дочернего содержимого при изменении размера элемента реакции (когда ширина становится узкой), а не размер окна через фиксированные контрольные точки

Question

У меня есть компонент реагирования, который отображает div с некоторыми элементами элемента меню - встроенный блок (все выровнены по горизонтали)

с текстом «Магазин игрушек», «Настроить свою игрушку», «О нас»

Итак, как этого добиться: когда размер окна изменяется, я не хочу, чтобы элементы накладывались друг на друга, но сначала измените текст руководства на «Игрушки», «Настроить» и «О» только наточка, когда родительский элемент не может держать их в одной строке, потому что он больше не достаточно широк (не на фиксированной точке останова окна).Когда пространство становится слишком узким для этого, измените текст на «T», «C», «A» (не спрашивайте, почему, так должно быть)

Так как это не только изменение стиля, но исодержание, как это можно сделать с помощью элемента реагирования?

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

Вот мое решение JSFiddle ,

Проверьте JSFiddle, изменив размер окна вывода.

Это не идеально, но оно даст вам начальную точку

В основном я использовал для этого css content:attr(attib-name).

Я сделал 3 attibutes data-small, data-med, data-big

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

и использую

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

Для установки различных значений.

* {
  box-sizing: border-box;
}

body {
  padding: 20px;
}

.parent {}

.inline {
  border: 1px solid black;
  display: inline-block;
  min-width: 50px;
  position: relative;
  padding: 5px 10px;
}

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

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

Answer 2

Если вы не хотите полагаться на предустановленные точки останова (как кажется, имеет место), то ваше единственное решение - вычислить ширину элементов вашего меню и сравнить ее с шириной окна вашего клиента.Если общая ширина элементов вашего меню превышает ширину вашего окна, обновите содержимое элементов меню с помощью их первой более короткой альтернативы, а затем их второй самой короткой.

Это необходимо сделать при первоначальном рендеринге, ив любом событии изменения размера окна.

Для сравнения ширины можно использовать комбинацию React Refs, Element.clientWidth и window.innerWidth.

Что касается переключения с одной текстовой альтернативы нас другой стороны, я могу придумать несколько способов сделать это (используя CSS, напрямую обновляя текстовое содержимое, используя состояние и / или реквизиты и т. д.).

Я позволю вам самостоятельно разработать детали реализации.

Answer 3

Вы можете добиться этого с помощью начальной загрузки. Рабочий код:

<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>