Как добавлять класс к элементу в React?

Question

[Максим Антонихин]

Есть компонент сайдбара. Открывается добавлением класса .cbp-spmenu-open

render() {
let cx = React.addons.classSet;
    let classes = cx({
      "cbp-spmenu": true,
      "cbp-spmenu-vertical": true,
      "cbp-spmenu-left": true,
      "cbp-spmenu-open": this.props.isOpen
    })
    return (
      <nav className={ classes }>
        <h3>Menu</h3>
        <a href="#">Celery seakale</a>
        <a href="#">Dulse daikon</a>
        <a href="#">Zucchini garlic</a>
        <a href="#">Catsear azuki bean</a>
        <a href="#">Dandelion bunya</a>
        <a href="#">Rutabaga</a>
      </nav>
    );
}

При добавлении класса из компонента не срабатывает анимация, хотя если прямо в DOM редакторе браузера добавить класс, то всё нормально. Подскажите как быть?

Answer 1

[Андрей Антропов]

С учетом того, что состояние передается через свойства, то этот компонент точно перерендривается полностью, и возможно полностью и заменяется.
Это можно вылечить указав key атрибут для компонента навигационного меню. В таком случае будет обновление, а не перестройка.

Comments

[Максим Антонихин]

Не совсем понял. А что в ключе указать?

[Андрей Антропов]

Уникальное значение, которое характеризует этот элемент

[Максим Антонихин]

Спасибо за ответ. Получилось.

Answer 2

[veitmen]

Могу ошибаться, конечно, но видимо, насколько я понимаю, при изменении элемента в дереве ReactJs элементов, этот элемент заменяется на другой. Т.е. не просто класс у элемента меняется, а полностью элемент меняется, поэтому не работает анимация. Хотя я могу быть не прав. Может быть имеет смысл просто подписаться на некое событие и поменять класс с использованием jQuery. Но может быть есть подход более правильный.

Comments

[Максим Антонихин]

В дом редакторе браузера видно, что меняется набор классов, а не элемент весь целиком.
Не хочется прибегать к jquery конечно, но если это будет единственный вариант, то придётся.

[veitmen]

Максим Антонихин: Ниже Вам правильно посоветовали. Используйте Key свойство у элемента, дабы не происходило пересоздание элемента. И в дом редакторе браузера я не уверен, что вы увидите что происходит на самом деле.

[Андрей Антропов]

Согласен, даже при полной перерисовке элемента мне подсвечивается только изменение свойств

[ParaBellum577]

Попробуй выводить массив компонентов через map, указав при этом для компонента (elem, key) => <линк key={key}>{elem}<линк/>; Должно работать и код чище будет