本机反应：文本组件内的三元条件

Question

是否可以创建三元条件，以便如果 {title} 包含部分文本，例如“appl”，则 'styles.label' 将更改为 'styles.label_2'。

const Field = ({ title, info }: Props) => {
  return (
    <View style={styles.container}>
      <Text style={styles.label}> {title} </Text>
      <Text style={styles.info}>{info ? info : ''} </Text>
    </View>
  );
};

Answer 1

你肯定能做到。

下面检查 title 字符串是否包含 appl 如果是，则使用 styles.label2 否则，使用 styles.label

<Text style={title.includes('appl') ? styles.label2 : styles.label}> {title} </Text>

Answer 2

如果您仅应用第二种样式以在计算结果为 false 时隐藏，我更喜欢在呈现组件之前进行评估——因此，如果它计算结果为 false，则永远不会存在任何组件，而不是一个空组件：

const Field = ({ title, info }: Props) => {
  return (
    <View style={styles.container}>
      <Text style={styles.label}> {title} </Text>
      {info && info.contains("appl") && (<Text style={styles.info}>{info} </Text>)}
    </View>
  );
};

本机反应：文本组件内的三元条件

react native: Ternary condition inside Text component

javascript

reactjs

react-native