Блог

Предположим, у меня есть компонент с именем Square, и я помещаю некоторые из них в приложение. Я хочу, чтобы один из них был активным, а все следующие квадратные компоненты вращались на основе индекса этого. что-то вроде этого:

 <div className="app">
  <Square className={""}/>
  <Square className={"square--active"}/>
  <Square className={""}/>
  <Square className={""}/>
</div>
 

Я передаю active className в качестве реквизита. итак, здесь, поскольку второй из них активен, второй квадрат, третий и четвертый должны быть повернуты на 90 градусов. Я знаю, как это сделать в vanilla JS, но как я могу сделать это правильно реактивным способом?

РЕДАКТИРОВАТЬ: я пытаюсь показать это на наглядном примере:

здесь вы видите, что после нажатия на второй квадрат второй квадрат и все квадраты после его поворота на 90 градусов. но если я нажму на третий, третий и четвертый должны поворачиваться на 180 градусов.

Надеюсь, теперь это понятно. Спасибо.

Если индекс Square to be active фиксирован, вы можете просто добавить пользовательские имена классов к следующим Square s (и добавить стили для него внутри компонента) следующим образом:

 <div className="app">
  <Square className=""/>
  <Square className="square--active square--rotated"/>
  <Square className="square--rotated"/>
  <Square className="square--rotated"/>
  <Square className="square--rotated"/>
</div>
 

Если активный индекс является переменной и отправляется вам в качестве реквизита, это сложнее, но вы тоже можете это сделать. Вот примерное решение:

 <div className="app">
  <Square className={getSquareClassName(0)}/>
  <Square className={getSquareClassName(1)}/>
  <Square className={getSquareClassName(2)}/>
  <Square className={getSquareClassName(3)}/>
</div>
 

И в вашем компоненте:

 const getSquareClassName = idx => {
  if (idx === index) { // index is the prop/state of the active square
    return 'square--active square--rotated';
  } else if (idx > index) {
    return 'square--rotated';
  }

  return '';
};