React native 触摸屏中的三值运算

我试着这样使用它，但它给了我一个“不要嵌套三元表达式”的错误。我该如何解决这个问题

<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> 

{
this.state.RefreshImage？：
！this.state.RefreshImage&&this.state.ButtonNumber=='1'？
}                      

您需要将某些内容返回到第二个三元条件的false条件：

 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> 

返回(
{
刷新图像？：
！RefreshImage&&ButtonNumber=='1'？：null
}                      

我在本地测试的代码：

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（）{
设RefreshImage=false
让ButtonNumber='0'
返回(
{
刷新图像？：
！RefreshImage&&ButtonNumber=='1'？：
}                      
)
}
render（）{
返回(
{this.renderUpdate（）}
);
}

没有eslint规则：

  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> 

    )

  }

renderUpdate（）{
设RefreshImage=false
让ButtonNumber='0'
设imageLocal=null
如果（刷新图像）{
imageLocal=
}如果（！RefreshImage&&ButtonNumber==='1'，则为else{
imageLocal=
}否则{
imageLocal=
}
返回(
{imageLocal}
)
}

该错误（可能来自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>

let image=null；
if（this.state.RefreshImage）{
图像=；
}
else if（this.state.ButtonNumber=='1'）{
图像=；
}
// ...
{image}

---

（请注意，

！this.state.RefreshImage&&..

在第二个条件中是不必要的，因为前一个条件已经保证了这一点。）

第二个三元运算没有任何意义。两个选项完全相同。哦，对不起。编辑了post@JJJ。当我这样使用它时，它会给出错误。即使我在代码末尾加上“：”它也会给出still error，现在它更没有意义了。当第二个条件为false时，它应该显示什么？@hakan每个三元都应该有返回的内容y条件。第二个三元表达式在最后一部分中没有任何要返回的内容。请检查我的答案是否相同。我以前尝试过你的答案，但它给了我相同的错误@NirmalsinhIt仍然给我错误。在第一行，它告诉我：不要嵌套三元表达式。eslint（无嵌套三元）这是由于eslint的规则。请检查相同的。如果您需要禁用该规则或使用其他方式，而不是三元。您只需使用If-else-leader即可获得答案。