Как применить CSS анимацию для итераций React Array.map ()?

Question

Например, у меня есть CSS код для обработки простой анимации:

И мой компонент React для рендеринга простого списка и изменения списка со случайными значениями:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      items: ["Alex", "David", "John"]
    };
  }

  change() {
    this.setState({
      items: [Math.random(), Math.random(), Math.random()]
    });
  }

  render() {

    return (
      <div>
        {this.state.items.map((item, index) => (
          <p className="flasher" key={index}>
            {item}
          </p>
        ))}
        <button onClick={this.change.bind(this)}>Change</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("react"));

@keyframes flasher {
  from {
    background: red;
  }
  to {
    background: green;
  }
}

.flasher {
  display: block;
  animation: flasher 0.5s;
  background: red;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="react" />

После нажатия кнопки «Изменить» у меня один рендеринг в консоль браузера, но CSS анимация не работает в этом случае ... и только я у нас CSS анимация для первого рендера.

Итак, как я могу применить CSS анимацию к каждому изменению?

Видимо, этот код меняет только innerText, а не повторно сделать элемент для применения этого эффекта CSS. Вы знаете, мне нужен этот эффект мигалки для сервиса сокетов. этот сокет возвращает изменения, и я хочу применить флешер для привлечения внимания пользователя.

Спасибо

Answer 1

Если вы хотите сбросить компоненты и анимацию. Один из приемов, который вы можете использовать, чтобы заставить React перемонтировать его. Самый простой способ перемонтировать - менять ключ компонента после каждого нажатия кнопки.

Например, вместо этого:

<p className="flasher" key={index}>

используйте элемент в качестве ключа:

 <p className="flasher" key={item}>

Это поможет. https://codesandbox.io/s/hopeful-hertz-rpqv2