React实现带预览删除的拖拽单图上传组件及react-dnd报错解决

首先，你遇到的报错React Hook "useDrop" is called in function "myDropTarget" which is neither a React function component or a custom React Hook function，核心原因有两个：

• React组件的命名必须大写开头，myDropTarget是小写，React会把它当成普通HTML元素而非组件
• useDrop的配置参数不完整，缺少必要的accept定义和drop处理逻辑

接下来我们一步步修正并完成拖拽上传的功能：

1. 修正Drop Target组件命名与基础配置 #

把myDropTarget改成大写开头的MyDropTarget，同时完善useDrop的配置，指定接受的文件类型为图片，并处理拖拽后的文件读取逻辑：

import React from "react";
import { useDrop } from 'react-dnd'

// 组件名必须大写开头，符合React组件规范
export function MyDropTarget({ onChange }) {
  // useDrop配置：指定接受的文件类型，处理drop事件，收集拖拽状态
  const [{ isOver }, drop] = useDrop({
    accept: 'image/*', // 仅接受图片类文件
    drop: (item) => {
      // 获取拖拽的文件对象
      const file = item.files[0];
      if (file) {
        // 将文件转换为Base64格式
        const reader = new FileReader();
        reader.onload = (e) => {
          // 调用父组件的onChange，把Base64 URL传入状态
          onChange(e.target.result);
        };
        reader.readAsDataURL(file);
      }
    },
    // 收集拖拽状态，用于给用户提供视觉反馈
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  });

  // 拖拽区域样式，区分拖拽中/非拖拽状态
  const dropStyle = {
    border: isOver ? '2px dashed #2196F3' : '2px dashed #ccc',
    padding: '2rem',
    borderRadius: '8px',
    textAlign: 'center',
    cursor: 'pointer',
    marginTop: '1rem'
  };

  return (
    <div ref={drop} style={dropStyle}>
      {isOver ? '松开鼠标上传图片' : '拖拽图片到此处，或点击选择文件'}
      {/* 隐藏原生文件选择框，通过label关联实现点击选择功能 */}
      <input 
        type="file" 
        accept="image/*" 
        onChange={(e) => {
          const file = e.target.files[0];
          if (file) {
            const reader = new FileReader();
            reader.onload = (ev) => onChange(ev.target.result);
            reader.readAsDataURL(file);
          }
        }}
        style={{ display: 'none' }}
        id="image-upload"
      />
      <label htmlFor="image-upload" style={{ cursor: 'pointer' }}>
        <span>点击选择</span>
      </label>
    </div>
  );
}

2. 整合到ImageInput组件 #

现在把修正后的MyDropTarget整合到你的ImageInput中，注意DndProvider的位置（建议放在应用外层组件如App.js中，避免重复创建Provider；如果是单独组件使用，也可以保留在内部）：

import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { MyDropTarget } from "./MyDropTarget"; // 导入修正后的组件

const ImageInput = ({ value, onChange, deleteImage }) => (
  <div>
    <DndProvider backend={HTML5Backend}>
      <MyDropTarget onChange={onChange} />
    </DndProvider>
    {/* 图片预览与删除区域 */}
    {value && (
      <div style={{ marginTop: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
        <img src={value} alt="预览图" width="50" />
        <span 
          onClick={deleteImage} 
          style={{ cursor: 'pointer', color: '#f44336', fontSize: '1.2rem' }}
        >
          &#10060;
        </span>
      </div>
    )}
  </div>
);

export default ImageInput;

关键修改点说明 #

• 组件命名规范：React组件必须大写开头，这样React才能识别它是自定义组件而非原生HTML标签
• useDrop配置：
  • accept指定接受的文件类型为image/*，确保只处理图片文件
  • drop函数中通过item.files[0]获取拖拽的文件，用FileReader转成Base64后传给父组件的onChange
  • collect函数收集拖拽状态isOver，用于给用户提供拖拽中的视觉提示
• 兼容点击选择：保留了隐藏的文件输入框，通过label关联，支持用户点击选择图片，兼顾拖拽和点击两种操作方式

这样修改后，不仅解决了报错问题，还完整实现了拖拽上传、图片预览、删除的功能，同时支持将Base64 URL同步到父组件的状态中。

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