Стиль конкатенации с помощью условных стилей

Question

Не могли бы вы уточнить это выражение написанное в React

<View style={[styles.button, this.state.touching && styles.highlight]} /> 

Я знаю, что атрибут Style принимает массив объектов, какие чудеса меня это this.state.touching && styles.highlight часть. Может кто-нибудь просветить меня о том, как это работает? Большое спасибо!

Answer 1

Это logical if с использованием И (&&). Если первое значение ложно, оно вернет это значение, если оно правдивое, оно вернет второе значение.

const state = { 
 
    touching: false 
 
}; 
 

 
const styles = { 
 
    highlight: 'highlightClass' 
 
}; 
 

 
console.log('state.touching is false: ', state.touching && styles.highlight); 
 

 
state.touching = true; 
 

 
console.log('state.touching is true: ',state.touching && styles.highlight);

Обратите внимание, что это не будет стиль false если это falsey, так как реагируют родные стили игнорировать falsy значения. Согласно docs:

поведение такое же, как и Object.assign: в случае конфликта ценностей, один из правого элемента будет иметь приоритет и falsy значения, как ложь, неопределенными и нуль воли игнорировать. Обычным шаблоном является условное добавление стиля, основанного на некоторых условиях.