React-native：有条件地在渲染（返回）中显示文本

Question

如果某些值的变量，我试图向用户显示一些消息。

我有一个这样的代码：

connection(device, side) {
//....
if(side == "right"){
this.setState({deviceRight: true})
}
}

renderConnection(connectionProgress){
  switch(connectionProgress) {
  case 1: 
    if(this.state.deviceRight == true){
     return(<View><Text>Device Right Connected</Text></View>)
}
  default: 
   return null;
}

render() {

 const {connectionProgress} = this.state
 return (
     <Text>Waiting for connection..</Text>
     {this.renderConnection(connectionProgress)}
)
}
}

所以我会在变量（例如deviceRight设置为“true”）时显示文本。

我能怎么做？

Answer 1

我是这样解决的：

connection(device, side) {
//....
if(side == "right"){
this.setState({deviceRight: true})
}
}

renderConnection(){
  if(this.state.deviceRight == true)
     {
      return <Text>Device Connected </Text>
     }
 else {
   return <Text> Device not Connected</Text>}
}

render() {
 return (
     <Text>Waiting for connection..</Text>
     {this.renderConnection()}
)
}
}

Answer 2

在这种情况下，您可以使用三元运算符，如下所示 -

render() {
 return (
   <View>
     <Text>Waiting for connection..</Text>
     {this.state.deviceRight ? (
       <Text>Device Connected </Text>
     ) : (
     <Text> Device not Connected</Text>
     )}
   </View>
  )
}