reactjs - 仅当文件类型更改时，react-file-viewer 才会重新渲染

Question

我在共享点react-web 部件中使用react-file-viewer。只要文件的后缀改变，它就可以正常工作。如果后缀保持不变并且仅文件名发生变化，则react-file-viewer组件中不会重新渲染。

spfx 环境中有什么需要特别考虑的吗？

import * as React from 'react';
import FileViewer from 'react-file-viewer';
import { LibraryItem } from './LibraryItem';
//import { CustomErrorComponent } from 'custom-error';

export interface IDocumentViewProps {
  fileItem: LibraryItem;
  DocumentViewKey: any;
}

export default class DocumentView extends React.Component<IDocumentViewProps, any> {
  private path: string = "";
  private type: string = "";
  private fileItem: LibraryItem;

  constructor(props: IDocumentViewProps,any) {
    super(props);
    this.state = {
      path: '',
      suffix: ''
    };
  }

  private setFileComponents(item: LibraryItem) {
    if (item) {
      this.path = item.FileRef;
      this.type = item.File_x0020_Type;
      this.setState({ suffix: this.type });
      this.setState({ path: this.path });
    }
  }

  public componentWillReceiveProps(nextProps) {
    const { fileItem } = this.props;
    if (nextProps.fileItem !== fileItem) {
      this.fileItem = nextProps.fileItem;
      this.setFileComponents(this.fileItem);
    }
  }

  public render(): React.ReactElement<IDocumentViewProps,any> {
    return (
      <FileViewer
        fileType={this.state.suffix}
        filePath={this.state.path}
        // errorComponent={CustomErrorComponent}      
        onError={this.onError} 
        on
        />

    );
  }

  private onError(e) {
    // logger.logError(e, 'error in file-viewer');
    console.log(e, 'error in file-viewer');
  }
}

Answer 1

解决方案(解决方法)是设置 key={currentFile.id}。 我在 github 上得到了这个非常有用的提示 https://github.com/plangrid/react-file-viewer/issues/142 谢谢 https://github.com/yulolimum