maksipes
@maksipes

Делают ли так в Reacte?

Вопрос о best practices в Реакте.

Есть компонент ItemsList выводящий в цикле компонент Item . Каждый Item состоит из нескольких дивов, несколько из которых должны откликаться на клик.

Чтобы не городить огород из онКликов вешаю один обработчик onClick, спущенный с App компонента, на корневой элемент Item, и на верх передаю уже любой клик по Itemу, само событие и индекс кликнутого Itema.

export default class Item extends React.Component {
  render() {
    const { item, index, onClick } = this.props;
    return (
      <div className="item" onClick={e => onClick(index, e)}>
        <div className="item-over">...</div>
        <div className="item-main">
          <div className="item-text">...</div>
          <div className="item-hint">...</div>
          <div className="item-extra">...</div>
        </div>
      </div>
    );
  }
}


В App, где вся логика, принимаю:

onItemClick = (index, e) => {
    switch (e.target.className) {
      case "item-over":
        console.log("Клинкнут блок над айтмом " + index);
        break;
      case "item-text":
        console.log("Кликнут основной текст в айтеме " + index);
        break;
      case "item-hint":
        console.log("Кликнут доп текст в айтиме " + index);
        break;
      case "item-extra":
        console.log("Кликнут дополнительный блок а айтиме");
        break;
      default: {
      }
    }
  };


Ну перед этим естественно передаю ссылку на обработчик и собственно данные для отображения:

<ItemsList items={items} onClick={this.onItemClick} />


Вопрос - нормально ли так поступать в React и если нет - то как сделать правильно?

На мой взгляд - куча условий в обработчике смотрится не очень и идентификация элемента по классу тоже как-то сомнительно выглядит.
  • Вопрос задан
  • 122 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Ненормально так делать. Одна из целей которую преследовали разработчики современных фреймворков это уход от необходимости вручную сверяться с DOM селекторами.
Подобные места, источник возникновения целого класса багов, когда вы забудете, что селектор используется в JS и переименуете или удалите его. А выяснят, что что-то отвалилось, возможно, только ваши пользователи.
Можно, конечно, использовать дополнительные селекторы с префиксами: 'item__hint js--item__hint', но с возможностями современных фреймворков, лучше и удобней отказаться от сверки с DOM селекторами и повесть разные слушатели на разные элементы.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы