更清晰的寫多個條件語句的方法

我需要問你們是否可以找到更簡潔的方式來重寫這段代碼。我看不出使其能夠更清晰的寫多個條件語句的方法

更新2（後一段時間，超大功率的心意我想出了這一點。我相信還有更大的提升空間）

const uploadedFiles = images.map((item, index) => { 
 
     if (images.length < 2) { 
 
     if (item.file.name.match(/.(gif)$/i)) { 
 
      return (
 
      <ImageGif 
 
       key= {index} 
 
       src= {item.blobUrl} 
 
       onClose={this.props.removeImage} 
 
      /> 
 
     ); 
 
     } 
 

 
     return (<ImageContainer 
 
      src={item.blobUrl} 
 
      key={index} 
 
      id={index} 
 
      onClose={this.props.removeImage} 
 
     />); 
 
     } 
 

 
     if (MAX_SIZE === index + 1) { 
 
     return (<ImageContainer 
 
      src={item.blobUrl} 
 
      key={index} 
 
      id={index} 
 
      onClose={this.props.removeImage} 
 
      hiddenImages={hiddenImages} 
 
      />); 
 
     } 
 
     return (<ImageContainer 
 
      src={item.blobUrl} 
 
      key={index} 
 
      id={index} 
 
      onClose={this.props.removeImage} 
 
      />); 
 
    });

真的很感激任何方向。祝你有美好的一天。

來源

2017-08-01 Nicholas

如果你在裏面有條件返回，你不需要else語句。 – evolutionxbox

@evolutionxbox噢，我明白了。而不是'else if'我應該只用'if'對嗎？ – Nicholas

嘗試並減少有條件的思考。儘可能簡單。 – evolutionxbox

這就是我該怎麼做的。

const uploadedFiles = images.map((item, index) => { 
    const imageContainer = <ImageContainer 
           src={item.blobUrl} 
           key={index} 
           id={index} 
           onClose={this.props.removeImage} 
          />; 

    if (images.length >= 2) { 
     if (MAX_SIZE === index + 1) { 
      return (
       <ImageContainer 
        src={item.blobUrl} 
        key={index} 
        id={index} 
        onClose={this.props.removeImage} 
        hiddenImages={hiddenImages} 
       /> 
      ); 
     } 

     return { imageContainer }; 
    } 
    else { 
     if (images.length < 2) { 
      if (item.file.name.match(/.(gif)$/i)) { 
       return (
        <ImageGif 
         key= {index} 
         src= {item.blobUrl} 
         onClose={this.props.removeImage} 
        /> 
       ); 
      } 

      return { imageContainer }; 
     } 
    } 

    return null; 
});

來源

2017-08-01 09:20:23

-1

const uploadedFiles = images.map((item, index) => { 
    const imageContainer = <ImageContainer 
     src={item.blobUrl} 
     key={index} 
     id={index} 
     onClose={this.props.removeImage} 
    />; 

    if (images.length < 2) { 
    if(item.file.name.match(/.(gif)$/i)){ 
    return (
     <ImageGif 
     key= {index} 
     src= {item.blobUrl} 
     onClose={this.props.removeImage} 
     /> 
    );} 
    return { imageContainer }; 
    } 
    else { 
    if (MAX_SIZE === index + 1) { 
     return (<ImageContainer 
      src={item.blobUrl} 
      key={index} 
      id={index} 
      onClose={this.props.removeImage} 
      hiddenImages={hiddenImages} 
     />); 
    } 
    return { imageContainer }; 
    } 

    return null; 
});

來源

2017-08-01 09:20:26

更清晰的寫多個條件語句的方法

回答

相關問題