Question

我正在学习一个教程，这一点没有得到解释，让我感到困惑，

使用！isOpen样式有什么用？

这是否意味着如果我通过isOpen，那么styles.buttonPadding会起作用吗？

export default function ToggleableTimerForm({ isOpen }) {
  return (
    <View style={[styles.container, !isOpen && styles.buttonPadding]}>
      {isOpen ? <TimerForm /> : <TimerButton title="+" color="black" />}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingVertical: 10,
  },
  buttonPadding: {
    paddingHorizontal: 15,
  },
});

Answer 1

您可以在渲染中使用条件测试来添加代码和样式

以您的示例为例：

<View style={[styles.container, !isOpen && styles.buttonPadding]}>
  {isOpen ? <TimerForm /> : <TimerButton title="+" color="black" />}
</View>

如果isOpen为true，则与：

<View style={[styles.container, styles.buttonPadding]}>
    <TimerForm />
</View>

如果isOpen为false，则与：

<View style={[styles.container]}>
    <TimerButton title="+" color="black" />
</View>

话题不多，有时您会看到以下语法：

    <View style={styles.container}>
        {isOpen && <TimerForm />}
    </View>

等于此

    <View style={styles.container}>
        {isOpen ? <TimerForm /> : null}
    </View>

Answer 2

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Short-circuit_evaluation

我认为这种情况称为短路评估。 &&运算符的右侧仅在左侧条件为true时适用。在这种情况下，该样式仅在isOpen为false时才有效。（因为！isOpen）。

您可以使用此评估进行空检查。例如，您将道具中的用户名数据与{this.props.user.name}一起使用，如果道具中没有用户数据{this.props.user}，则您的应用将崩溃。因此，您编写{this.props.user && this.props.user.name}，并且只有在道具中有用户时，您的代码才会尝试访问用户名数据。因此，您的应用程序不会崩溃。

条件渲染样式

2 个答案: