如果数据不可用,则为备用文本

时间:2018-10-02 18:07:22

标签: react-native

在React Native中,如果数据不可用,如何指定备用文本?

例如,在以下代码中,如果技能数组为空,我如何指定显示“尚无技能”

<View>
    <Text>
        Skills
    </Text> 
    <View>{
        p.skills && p.skills.map( skill => 
            <Text key={skill}>
                { skill }
            </Text>                                        
        )
    }</View>
</View>

2 个答案:

答案 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渲染行(这对性能有很大帮助)