在表的文件类型中添加图标

Question

因此，我必须向其中添加特定文件的图标。我有一个组件可以帮我做到这一点：

import React from 'react';
import PropTypes from 'prop-types';
import { Component } from 'kawax-js';
import getIconForFilename from 'lib/file-icons';
import FileHasher from 'lib/hashing';
import ProgressBar from 'components/verify/utils/ProgressBar';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheckCircle, faSpinner } from '@fortawesome/free-solid-svg-icons';

class FileProgress extends React.Component {

  state = {
    hash: null,
    progress: 0,
    fileHasher: null,
  };

  static css = {
    marginTop: '20px',
    marginBottom: '20px',
    '.hash': {
      fontSize: '0.75em',
      wordWrap: 'break-word',
    },
  };

  static propTypes = {
    file: PropTypes.object.isRequired,
    onHashDone: PropTypes.func.isRequired,
  };

  componentDidMount() {
    this.state.fileHasher = new FileHasher(this.props.file, this.onProgress);
    this.state.fileHasher.hashFile();
  }

  componentWillUnmount() {
    if (this.state.fileHasher) {
      this.state.fileHasher.stop();
    }
  }

  onProgress = (data) => {
    if (data.progress) {
      this.setState({ progress: data.progress });
    }
    if (data.result) {
      this.setState({ hash: data.result });
      this.props.onHashDone({ file: this.props.file, hash: data.result });
    }
  };

  getStatusIcon() {
    if (this.state.hash) {
      return <FontAwesomeIcon icon={faCheckCircle} size="2x" listItem />;
    }
    return <FontAwesomeIcon icon={faSpinner} pulse size="2x" listItem />;
  }

  getFileIcon() {
    return <FontAwesomeIcon icon={getIconForFilename(this.props.file.name)} size="2x" />;
  }

  generateRender() {
    if (this.state.hash) {
      return <p className="hash"><b>Hash : </b>{this.state.hash}</p>;
    }
    return <ProgressBar progress={this.state.progress} />;
  }

  render() {
    return (
      <li>
        { this.getStatusIcon() }
        <h5> { this.getFileIcon() } {this.props.file.name}</h5>
        { this.generateRender() }
      </li>
    );

  }

}

export default Component(FileProgress);

我还有另一个组件，大概必须导入我提供的第一个组件（我这样做了）并将该导入添加到renderRow函数中：

import _ from 'lodash';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
import PropTypes from 'prop-types';
import { Table } from 'reactstrap';
import { Component } from 'kawax-js';
import filesize from 'filesize';
import TimeAgo from 'components/misc/TimeAgo';
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
import FileProgress from 'components/verify/files/FileProgress';

class Attachments extends React.Component {

  static propTypes = {
    blobs: PropTypes.array.isRequired,
    download: PropTypes.func.isRequired,
    onFileDrop: PropTypes.func.isRequired,
    isHeadRevision: PropTypes.bool.isRequired,
    pendingDownloads: PropTypes.array.isRequired,
  };

  state = {
    dragZoneStyle: null,
  };

  static css = {
    padding: '10px',
    thead: {
      '& td,th': {
        borderTop: '0px',
        border: '0px',
      },
    },
    tbody: {
      '&tr': {
        cursor: 'pointer',
      },
      '&tr:hover': {
        '&td,th': {
          backgroundColor: '#F4F5F7',
        },
      },
      '&td': {
        borderTop: '1px solid rgba($black,.125) !default',
        borderBottom: '0px',
      },
    },
  };

  onClickDownload = (blob) => (event) => {
    event.preventDefault();
    const { download } = this.props;
    download(blob);
  };

  renderName(blob) {
    const { pendingDownloads } = this.props;
    const downloading = pendingDownloads.some((action) => action.payload.blobId === blob.id);
    if (downloading) {
      return (
        <React.Fragment>
          <FontAwesomeIcon icon={faCircleNotch} spin className="mr-5" />
          Downloading your file.
        </React.Fragment>);
    }
    return blob.name;
  }

  renderRow(blob) {
    return (
      <tr key={blob.id} onClick={this.onClickDownload(blob)}>
        <td><FileProgress file={} onHashDone={} /></td>
        <td>{this.renderName(blob)}</td>
        <td className="text-right">{filesize(blob.size)}</td>
        <td><TimeAgo timestamp={blob.updatedAt} /></td>
      </tr>
    );
  }

  renderAttachmentTable() {
    const { blobs } = this.props;
    if (!_.isEmpty(blobs)) {
      return (
        <Table>
          <thead>
            <tr>
              <th>Type</th>
              <th>Name</th>
              <th className="text-right">Size</th>
              <th>Date</th>
            </tr>
          </thead>
          <tbody>
            {_.map(blobs, (blob) => this.renderRow(blob))}
          </tbody>
        </Table>
      );
    }
    return (
      <div>No attachment.</div>
    );

  }

  renderDropFileInfoBox() {
    const infoBoxStyle = {
      backgroundColor: '#DDDDDD',
      zIndex: '10000',
      position: 'fixed',
      bottom: '40px',
      left: '50%',
      transform: 'translate(-30%, 0)',
      padding: '20px',
      borderRadius: '3px',
      fontSize: '1.2em',
      textAlign: 'center',
    };
    if (this.state.dragZoneStyle) {
      return <div className="file-upload-infobox" style={infoBoxStyle}>Drop your files to upload them.</div>;
    }
    return null;
  }

  onFileDropped = (event) => {
    event.preventDefault();
    if (this.props.isHeadRevision) {
      this.props.onFileDrop(event.dataTransfer.files);
      this.setState({
        dragZoneStyle: null,
      });
    }
  };

  // We need this listener for the zone to be droppable
  onFileDragged = (event) => {
    event.preventDefault();
    if (this.props.isHeadRevision) {
      this.setState({
        dragZoneStyle: {
          border: '2px solid #C0C0C0',
          backgroundColor: 'rgba(240, 240, 240, 0.5)',
        },
      });
    }
  };

  onFileDraggedOut = (event) => {
    event.preventDefault();
    if (this.props.isHeadRevision) {
      this.setState({
        dragZoneStyle: null,
      });
    }
  };

  render() {
    return (
      <div className="block" onDragLeave={this.onFileDraggedOut} onDragOver={this.onFileDragged} onDrop={this.onFileDropped} style={this.state.dragZoneStyle}>
        <h2>Attachments</h2>
        {this.renderAttachmentTable()}
        {this.renderDropFileInfoBox()}
      </div>
    );
  }


}

export default Component(Attachments);

如您所见，第一个组件具有两个isRequired PropTypes。我的问题是：作为另一个组件中的这两个字段，我到底要传递什么？我对这个应用程序很陌生，感到迷茫。所有帮助将不胜感激！

Answer 1

已解决：

我看错了组件，我有一个必须使用的可导出函数。