react-dropzone 子图标在状态更改时不更改

Question

我有一个 React 项目，我正在使用 react-dropzone 组件：

import Dropzone from 'react-dropzone';

我想让它有状态，并根据状态显示不同的图像和文本。我将状态定义为：

const status = {
  ready: 'ready',
  preview: 'preview',
  error: 'error',
  requested: 'requested',
  success: 'success',
  failed: 'failed',
};

状态可以根据用户操作而改变（所以当他们将文件拖到拖放区时，我会按如下方式更新状态：

onDrop(acceptedFiles, rejectedFiles) {
  // do some stuff here...
  this.setState({ status: status.preview });

}

我的渲染方法是一个三步过程： 1. 实际渲染方法

render() {
const config = {
  iconFiletypes: ['.xlsx'],
  showFiletypeIcon: true,
};

return (
  <div style={{ marginBottom: '30px' }}>
    <Dropzone
      config={config}
      onDrop={files => this.onDrop(files)}
      //className="dropzone"
      multiple={false}
    >
      {this.renderDropZoneContent()}
    </Dropzone>
  </div>
);

}

根据状态选择要渲染的内容：

renderDropZoneContent() {
  switch (this.state.status) {
    case status.ready:
      return this.renderReadyState();
    case status.preview:
      return this.renderPreviewState();
    // and on down for each state / status + default case...
  }
}

最后是将每个案例呈现为函数的代码：

renderPreviewState() {
  return (
    <div style={{ marginTop: '35px', textAlign: 'center' }}>
    <i className="far fa-file-excel" style={{ verticalAlign: 'middle', fontSize: '50px' }} />
    {/* There is more jsx here but I removed it for clarity */}
  </div>
  );
}

renderReadyState() {
  return (
    <div style={{ marginTop:'35px', textAlign:'center'}>
      <i className="fas fa-cloud-upload-alt" style={{ verticalAlign: 'middle', fontSize: '50px' }} />
  </div>
);

}

没什么太疯狂的。我的问题是，随着状态的变化，文本会更新，但图标不会。这是一个有趣的问题，因为应用程序的逻辑有效，但它的特定元素没有得到更新。更有趣的是，我尝试将整个 return 包装在另一个 div 中并得到错误：Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed不是该节点的子节点。我用头撞墙。如果有人以前遇到过这个问题并有任何提示，将不胜感激！！

Answer 1

可能与 Font Awesome 和 React 处理渲染的方式有冲突。

If you are using React we recommend the react-fontawesome package or Web Fonts with CSS.

https://fontawesome.com/how-to-use/on-the-web/using-with/react

react-dropzone 子图标在状态更改时不更改

react-dropzone child icon not changing on state change

reactjs

react-dropzone