Блог компании RUVDS.com
JavaScript
ReactJS
Разработка веб-сайтов
Комментарии 7
+3

Я думал холивары про то, можно ли в обработчики компонентов стрелочные функции передавать закончился еще эдак в году 2016ом


if (!Object.prototype.hasOwnProperty.call(this.clickHandlers, key)) {
  this.clickHandlers[key] = () => alert(key);
}

Не получится так, что мы будем копить ненужные обработчики событий, которые не удаляются, в случае если список динамический и часто меняется ( корзина товаров, например ).


Легче тогда кнопке передать этот самый key и потом по нему найти. Обработчик один, то что есть поиск, так он в любом случае будет, если мы работаем только с ключом.

0
Зачем нужны эти костыли с кешированием функций если проблема описанная во втором примере элементарно решается созданием обработчика события onClick внутри дочернего компонента (в примере это <Button />) и передачи ему отдельным параметром элемента списка?

При клике, сам компонент <Button item={listItem} onClick={this.handleClick} \/> зная переданный ему в параметрах элемент списка, спокойно возвращает связанные с ним данные в хендлер родительского компонента handleClick().
0
Затем, что это уже получается не Button, а ItemButton. Который нужно еще отдельно где-то объявить.

Хотя мне тоже кажется, что подход с созданием новых компонентом-оберток проще.
+1
Так в этом суть Реакта: пишите компоненты и инкапсулируйте в них поведение. Вместо этого автор статьи под видом того «как надо» предлагает уродливые костыли. Зачем для каждого из элементов списка создавать свою функцию обработчик и потом заморачиваться с её кешированием, когда можно обойтись одним методом и не сломать при этом сам React?
0

Не обязательно, достаточно Button сделать универсальной


class Button extends React.PureComponent {
  render() {
    return (
      <button onClick={this.handleClick}>{this.props.children}</button>
    )
  }
  handleClick: () => {
    const {onClick, ...others} = this.props
    onClick(others);
  }
}

Таким образом можно вообще все что угодно передавать в Button ( но лучше если это будут простые данные, типо id/key/name )

+1
Как по мне все пропсы в хендлер передавать плохой вариант. Если это обычная UI кнопка то она может принимать множество стилевых пропсов: type, size, etc.
Лучше если уж так хотите делать универсальным компонент, то лучше сделать что-то вроде onClickProps, имхо.
Только полноправные пользователи могут оставлять комментарии. , пожалуйста.