Question

我正在获得多个文件名。 -对于每个附件，我需要附加pdf或word或jpg图标 -所以我用substr和lastIndexOf得到了文件格式。 -现在使用if条件，我能够禁用一个文件的图标。 -如果我测试多个文件，则不检查第二个文件。 -我认为问题是由于if中的return语句引起的。 -您能告诉我如何修复多个文件吗？ -在下面提供我的代码段。

    <!-- language-all: lang-or-tag-here -->


                  {this.props.driveFiles.length > 0
                    ? this.props.driveFiles.map(_driveFileKey => {
                        var driveFormat = _driveFileKey.name.substr(
                          _driveFileKey.name.lastIndexOf(".") + 1
                        );
                        console.log("filename--->", driveFormat);
                        if (driveFormat === "pdf") {
                          return (
                            <div>
                              {" "}
                              <Icon icon={["fal", "file-pdf"]} />
                              {_driveFileKey.name}
                            </div>
                          );
                        } else if (driveFormat === "doc") {
                          return (
                            <div>
                              {" "}
                              <Icon icon={["fal", "file-word"]} />
                              {_driveFileKey.name}
                            </div>
                          );
                        } else if (driveFormat === "jpg") {
                          return (
                            <div>
                              {" "}
                              <Icon icon={["fal", "file-image"]} />
                              {_driveFileKey.name}
                            </div>
                          );
                        }

                        //return <div>{_driveFileKey.name}</div>;
                      })
                    : ""}

Answer 1

问题

JSX（{}）中的括号在功能上受到限制，因为它们仅支持single expression。将表达式视为代码块，解释器/编译器会将其视为单行代码。在单个表达式中拟合如此复杂的逻辑既难以实现也难以阅读。

解决方案

结合其他有用的React / Javascript功能使用JSX表达式。下面的解决方案是用ES6编写的（如果您需要将其向下移植到ES5，请告诉我）。

从适当的文件中导入Icon或在此文件中定义它。您可以在render函数中填充其余组件。

该逻辑分为多个函数，这些函数使您更容易理解代码试图实现的目标。测试一下，看看它是否适合您。

下面还有一些注释，解释了一些摘要。

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import Icon from '...<icon directory>...';

class IconExample extends Component {
  constructor(props) {
    super(props);

    this.getIconInfo = this.getIconInfo.bind(this);
    this.getIcons = this.getIcons.bind(this);
  }

  getIcons(driveFiles) {
    return driveFiles.map((driveFileKey, i) => {
      const dotIndex = driveFileKey.name.lastIndexOf('.') + 1;
      const driveFormat = driveFileKey.name.substr(dotIndex);
      console.log('filename---> %s', driveFormat);
      const iconInfo = this.getIconInfo(driveFormat);
      if (iconInfo === null) {
        return null;
      }
      return (
        <div key={`${driveFormat}${i}`}>
          <Icon icon={iconInfo} />
        </div>
      );
    });
  }

  getIconInfo(fileExtension) {
    const iconInfo = ['fal'];

    if (fileExtension === 'pdf') {
      iconInfo.push('file-pdf');
      return iconInfo;
    } else if (fileExtension === 'doc') {
      iconInfo.push('file-doc');
      return iconInfo;
    } else if (fileExtension === 'jpg') {
      iconInfo.push('file-jpg');
      return iconInfo;
    }

    return null;
  }

  render() {
    return (
      <Fragment>
        {this.props.driveFiles.length > 0 &&
        this.getIcons(this.props.driveFiles)
        }
      </Fragment>
    );
  }
}

IconExample.propTypes = {
  driveFiles: PropTypes.array,
};

export default IconExample;

注释

表达评估

{this.state.driveFiles.length > 0 &&
this.getIcons(this.state.driveFiles)
}

&&（和）运算符对双方的语句求值，并返回 last 语句，即右侧的语句。因此，只有在this.getIcons(this.props.driveFiles)返回true的情况下，this.state.driveFiles.length > 0才会被评估。

键

<div key={${driveFormat}${i}}>
  <Icon icon={iconInfo} />
</div>

React文档的

This part解释了为什么从迭代器返回时我们使用键。

在构造函数中绑定

this.getIconInfo = this.getIconInfo.bind(this);
this.getIcons = this.getIcons.bind(this);

这是使用“经典” javascript函数的问题，但是我相信在最现代的ECMAScript及更高版本中，可以在类定义中使用arrow functions来消除此需求。我们进行绑定以确保函数中this所指的是什么，我们希望它成为我们正在使用的组件，而不是全局this或在这种情况下的默认值。

Answer 2

为什么不使用变量来存储图标？像这样：

const icons = {
  pdf: ["fal", "file-pdf"],
  doc: ["fal", "file-word"],
  jpg: ["fal", "file-image"],
};

然后您可以使用reduce而不是map来仅渲染有效文件：

{
  this.props.driveFiles.length > 0 ?
    this.props.driveFiles.reduce((result, _driveFileKey) => {
      var driveFormat = _driveFileKey.name.substr(
        _driveFileKey.name.lastIndexOf(".") + 1
      );
      console.log("filename--->", driveFormat);
      if (icons[driveFormat]) {
        result.push(
          <div>
            {" "}
            <Icon icon={icons[driveFormat]} />
            {_driveFileKey.name}
          </div>
        );
      }
      return result;
    }, [])
    : ""
}

如果您想支持其他文件类型，只需将其添加到icons变量即可。像：png: ["fal", "file-image"]

我制作了一个codepen来显示此示例

每个附件我都需要附上pdf或word或jpg图标

2 个答案:

问题

解决方案

注释

表达评估

键

在构造函数中绑定