在React Native中,如果数据不可用,如何指定备用文本?
例如,在以下代码中,如果技能数组为空,我如何指定显示“尚无技能” ?
<View>
<Text>
Skills
</Text>
<View>{
p.skills && p.skills.map( skill =>
<Text key={skill}>
{ skill }
</Text>
)
}</View>
</View>
答案 0 :(得分:0)
您可以在渲染之前将所需的输出保存在变量中:
let skillText = (<Text>{'no skills, yet'}</Text>);
if (p.skills && p.skills.length > 0) {
skillText = p.skills.map( skill =>
<Text key={skill}>
{ skill }
</Text>
);
}
...some more code...
<View>
<Text>
Skills
</Text>
<View>{ skillText }</View>
</View>
或者直接在jsx中使用三元组:
<View>
<Text>
Skills
</Text>
<View>{
(p.skills && p.skills.length > 0) ? p.skills.map( skill =>
<Text key={skill}>
{ skill }
</Text>
) : 'no skills, yet'
}</View>
</View>
答案 1 :(得分:0)
第一种方法(简短的方法):
<View>
<Text>
Skills
</Text>
<View>
{
(p.skills && p.skills.length > 0) ? p.skills.map( skill =>
<Text key={skill}>
{ skill }
</Text>
) : (
<Text>no skills, yet</Text>
)
}
</View>
</View>
第二种方式:将列表渲染提取到单独的方法中
renderSkills = () => {
if (p.skills && p.skills.length > 0) {
return p.skills.map( skill =>
<Text key={skill}>
{ skill }
</Text>
)
} else {
return (
<Text>no skills, yet</Text>
)
}
}
render() {
return (
<View>
<Text>
Skills
</Text>
<View>
{this.renderSkills()}
</View>
</View>
)
}
PS:请考虑使用FlatList
而不是使用Text
渲染行(这对性能有很大帮助)