Question

你能否详细说明用React

写的这个表达式

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

我知道Style属性接受一个对象数组，让我感到奇怪的是this.state.touching && styles.highlight部分。有人可以告诉我这是如何工作的吗？非常感谢！

Answer 1

这是使用And（&&）的logical if。如果第一个值为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样式，因为反应原生样式会忽略虚假值。根据{{3}}：

行为与Object.assign相同：如果发生冲突值，来自最右边元素的值将具有优先权 false，undefined和null等虚假值将被忽略。普通的模式是根据某些条件有条件地添加样式。

使用条件样式的样式连接

1 个答案: