Блог

У меня есть компонент React, в котором я передаю функцию onClick. Изначально у меня была только кнопка.onClick, но мне нужно проверить, является ли isBannerClickable ложным, прежде чем устанавливать это. Если isBannerClickable === true, то я не хочу устанавливать onClick.

Можно ли упростить или очистить эту опору onClick?

 onClick={!!isBannerClickable === false ? button.onClick : null}
 

Я бы лично написал это так:

 onClick={isBannerClickable ? null : button.onClick }
 

который отличается от вашего только в нескольких небольших отношениях:

1. !!isBannerClickable всегда будет логическое значение, true или false, поэтому нет необходимости === сравнивать его с false . Вы можете просто отрицать это — или удалить одно из своих отрицаний. Так вот оно и должно было случиться !isBannerClickable .
2. Затем я удалил ! и поменял местами 2 оставшихся пункта. Очевидно, что это точно то же самое, и это скорее личный выбор, но я всегда предпочитаю, чтобы в if/else или тройках сначала было «положительное» условие.

Один из способов, если isBannerClickable не обновляется часто, вы можете использовать это следующим образом.

 { isBannerClickable ? <button onClick={onClickHandler}></button> : <button></button> }
 

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