React子组件向父组件传递拖拽文件的FileList方案咨询

问题根源 #

FileList是浏览器提供的原生只读类数组对象，它并非标准JS对象，直接作为props或状态传递时，会触发React的严格模式校验或因对象不可变性导致更新异常——这就是为什么传文本没问题，但传FileList报错的原因。

具体实现方案 #

方案1：转成普通数组传递 #

这是最直接的解决方式，把FileList转换成React能正常处理的普通数组：

// 子组件FileDrop的拖拽事件处理逻辑
const handleDrop = (e) => {
  e.preventDefault();
  // 将原生FileList转为普通数组
  const files = Array.from(e.dataTransfer.files);
  // 调用父组件传入的回调，传递数组
  props.onFilesReceived(files);
};

父组件Modal接收数组后，可直接将其存入状态，数组里的每个元素都是原生File对象，和FileList中的元素完全一致，后续操作不受影响。

方案2：提取关键信息传递 #

如果不需要完整的File对象，只需要文件名、大小这类元数据，可以提取成普通对象数组，进一步降低耦合：

const handleDrop = (e) => {
  e.preventDefault();
  const fileData = Array.from(e.dataTransfer.files).map(file => ({
    name: file.name,
    size: file.size,
    type: file.type,
    rawFile: file // 若需保留原File对象，可加入此属性
  }));
  props.onFilesReceived(fileData);
};

方案3：全局状态管理（适用于复杂场景） #

如果组件层级较深，或需在多个组件间共享文件数据，可借助Zustand、Redux这类状态管理库：

1. 在子组件中将FileList转成数组后，更新全局状态；
2. 父组件直接从全局状态中读取文件数据即可。

必加注意点 #

拖拽事件必须调用e.preventDefault()，否则浏览器会默认打开拖拽的文件，导致自定义逻辑失效。

内容的提问来源于stack exchange，提问作者carlodurso