react native: Text组件中的三元条件

Question

是否可以创建三元条件，以便如果{title}包含文本的一部分，如"appl"然后的风格。标签'将更改为'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>
);
};