Блог

Я пытаюсь использовать это так, но это выдает ошибку «Не вкладывать троичные выражения». Как мне это исправить?

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

Ошибка (предположительно от ESLint или какого-либо другого инструмента компоновки) означает, что вложенные троичные операторы превращают код в нечитаемый беспорядок. Лучше всего отделить логику от 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 amp;amp; .. не требуется, поскольку выполнение предыдущего условия уже гарантировано как истинное.)

Вам нужно вернуть что-то в ложное условие второго троичного условия:

  return(
      <TouchableOpacity>
      {
        RefreshImage ? <Image source={require('../Images/add2.png')} style={{ height: 40, width: 40 }} /> :
       !RefreshImage amp;amp; 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 amp;amp; 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>
    );
}
  

Без правила 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 amp;amp; 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> 

    )

  }