我有一个反应项目，我正在使用 react-dropzone 组件：
import Dropzone from 'react-dropzone';
我想让它有状态并根据状态显示不同的图像和文本。我将我的状态定义为：
const status = {
ready: 'ready',
preview: 'preview',
error: 'error',
requested: 'requested',
success: 'success',
failed: 'failed',
};
状态可以根据用户操作进行更改（因此，当他们将文件拖到 dropzone 上时，我会按如下方式更新状态：
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 中并得到错误： Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node is not a child of this node. 我正用头撞墙。如果有人以前遇到过这个并有任何提示，非常感谢！