Question

我需要问一下，如果你们能找到一种更清晰的方法来重写这段代码。我无法看到让它成为可能

更新2（经过一段时间和超级大国之后，我想出了这个。我相信还有更多的改进空间）

＆＃13;

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

＆＃13;

非常感谢任何指示。祝你有个美好的一天。

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

更清晰地编写多个条件语句的方式

2 个答案: