Ссылка на кнопку, созданную методом карты в React

Question

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

Я хочу сослаться на «зеленую» кнопку и установить ее на мигать в течение 3 секунд . Как я могу сделать это в React?

const btnLayout = ["Yellow", "Green", "Blue", "Orange"];

btnLayout.map((item, index) => {
  return (
    <button>
      data-id={`slot-${item}`}
      type="button" className={`col-1 btn btn-${colorMap[index]}`}
      {item}
    </button>
  );
});

Answer 1

Используйте CSS анимации для мерцания эффекта и остановите его, используя animation-iteration-count.

const btnLayout = ["Yellow", "Green", "Blue", "Orange"];

btnLayout.map((item, index) => {
  return (
    <button>
      data-id={`slot-${item}`}
      type="button" className={`col-1 btn btn-${colorMap[index]} ${item === "Green" ? "blink_me" : ""}`}
      {item}
    </button>
  );
});

CSS классы

.blink_me {
  animation: blinker 1s linear infinite;
  animation-iteration-count: 3;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

Кодовая песочница

Answer 2

Вы можете использовать ref, чтобы получить доступ к узлу кнопки в DOM. Пожалуйста, отметьте это codesandbox .