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>
);

}

没有什么太疯狂了。我的问题是，随着状态的改变，文本会更新，而图标不会更新。这是一个有趣的问题，因为应用程序的逻辑有效，但是它的特定元素没有得到更新。更有趣的是，我尝试将整个返回值包装在另一个div中，并得到以下错误：未捕获的DOMException：无法在“节点”上执行“ removeChild”：要删除的节点不是该节点的子节点。我把头撞在墙上。如果有人以前遇到过这个问题并且有任何提示，将不胜感激！

Answer 1

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

如果您使用React，我们建议使用CSS的react-fontawesome软件包或Web字体。

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

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

1 个答案: