Question

我尝试像这样使用它，但是它给我一个“不嵌套三元表达式”的错误。我该如何解决？

<TouchableOpacity>
   {
     this.state.RefreshImage ? <Image source={require('../Images/add2.png')} style={{ height: 40, width: 40 }} /> :
    !this.state.RefreshImage && this.state.ButtonNumber === '1' ? <Image source={{ uri: imageUri }} style={{ height: 40, width: 40 }} />               
  }                      
</TouchableOpacity>

Answer 1

该错误（可能是ESLint或某些其他linting工具提供的错误）意味着嵌套的三元运算符使代码变得难以理解。最好将JSX外部的逻辑分开，并使用“正常”条件语句，以使意图更清晰并且更易于阅读。例如：

let image = null;

if(this.state.RefreshImage) {
  image = <Image source={require('../Images/add2.png')} style={{ height: 40, width: 40 }} />;
}
else if(this.state.ButtonNumber === '1') {
  image = <Image source={{ uri: imageUri }} style={{ height: 40, width: 40 }} />;
}

// ...

<TouchableOpacity>
    {image}
</TouchableOpacity>

（请注意，在第二种情况下!this.state.RefreshImage && ..是不必要的，因为先前的条件已经保证该条件为true。）

Answer 2

您需要使某些东西返回第二三元条件的错误条件：

 return(
      <TouchableOpacity>
      {
        RefreshImage ? <Image source={require('../Images/add2.png')} style={{ height: 40, width: 40 }} /> :
       !RefreshImage && ButtonNumber === '1' ? <Image source={{ uri: imageUri }} style={{ height: 40, width: 40 }} /> : null
     }                      
   </TouchableOpacity>

我在本地测试过的代码：

renderUpdate(){
    let RefreshImage = false
    let ButtonNumber = '0'


    return(
      <TouchableOpacity>
      {
        RefreshImage ? <Image source={IC_LOGO} style={{ height: 40, width: 40, backgroundColor:'blue' }} /> :
       !RefreshImage && ButtonNumber === '1' ? <Image source={IC_CHECKBOX} style={{ height: 40, width: 40, backgroundColor:'green' }} /> : <View style={{width:40, height: 50 , backgroundColor:'red'}}/>
     }                      
   </TouchableOpacity> 
    )
  }

  render() {

    return(
      <View style={{
        flex: 1,
        backgroundColor: APP_COLOR,
      }}>
             {this.renderUpdate()}

        </View>
    );
}

没有附带条件的规则：

  renderUpdate(){
    let RefreshImage = false
    let ButtonNumber = '0'
    let imageLocal = null
    if(RefreshImage){
      imageLocal = <Image source={IC_LOGO} style={{ height: 40, width: 40, backgroundColor:'blue' }} />
    }else if(!RefreshImage && ButtonNumber === '1'){
      imageLocal = <Image source={IC_CHECKBOX} style={{ height: 40, width: 40, backgroundColor:'green' }} />
    }else{
      imageLocal = <Image source={IC_BACKGROUND_IMAGE} style={{ height: 40, width: 40, backgroundColor:'green' }} />
    }

    return(
      <TouchableOpacity>
     {imageLocal}
    </TouchableOpacity> 

    )

  }

TouchableOpacity中的三元操作

2 个答案: