複数の条件文を書き直すより洗練された方法

Question

皆さんがこのコードをもっときれいに書き直す方法を見つけることができるかどうか尋ねる必要があります。私は作るために見ることができないことも可能

アップデート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} 
 
      />); 
 
    });

（私はこれを思い付くいくつかの時間とスーパーパワーの心の後。私は改善する余地があると確信しています）

本当に参考になります。良い一日を過ごしてください。

Answer 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 (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; 
}); 

Answer 2

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; 
});