使用条件样式的样式串联

Question

您可以详细说明以react

写的这一表达式

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

我知道该样式属性接受了一系列对象，想知道的是this.state.touching && styles.highlight部分。有人可以启发我如何工作吗？非常感谢！

Answer 1

这是逻辑的，如果使用和（ &&）。如果第一个值为false，它将返回该值，如果它是真实的，它将返回第二个值。

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的样式，因为React本地样式忽略了虚假的值。根据文档：

行为与对象相同。分配：在发生冲突的情况下 值，最正确元素的一个将具有优先权，并且 诸如False，Undefined和Null之类的虚假值将被忽略。普通的 模式是根据某种条件有条件地添加样式。