在 driveFiles 中我得到了多个文件名。
对于每个附件，我需要附上 pdf 或 word 或 jpg 图标
所以我使用 substr 和 lastIndexOf 得到了文件格式。
现在使用 if 条件我可以禁用一个文件的图标。
如果我测试多个文件，它不会检查第二个 if。
我认为问题是由于第一个 if 中的 return 语句引起的。
你能告诉我如何修复多个文件吗？

{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>;
  })
: ""}

最佳答案

问题

JSX 中的大括号 ({}) 的功能有限，因为它们仅支持 single expression .将表达式视为将由解释器/编译器评估为单行代码的代码块。将如此复杂的逻辑放入单个表达式既难以实现又难以阅读。

解决方案

将 JSX 表达式与其他有用的 React/Javascript 功能结合使用。下面的解决方案是用 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)
}

&&(和)运算符计算两边的语句并返回最后 语句，即右侧的语句。因此，只有当 this.state.driveFiles.length > 0 返回 true 时，才会评估 this.getIcons(this.props.driveFiles)。

按键

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

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

在构造函数中绑定(bind)

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

这是使用“经典”javascript 函数的问题，但我相信在最现代的 ECMAScript 和更高版本中你可以使用 arrow functions在类定义中以避免需要。我们绑定(bind)以确保 this 在函数中引用什么，我们希望它是我们正在使用的组件，而不是全局 this 或任何默认的这种情况。

关于javascript - 每个附件我都需要附上pdf或word或jpg图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56997931/