# @dropzone-ui/react 中文文档
规范地址：https://npmcn.com/package/%40dropzone-ui/react/
版本：7\.0\.4
npm 元数据更新时间：2023-04-24T16:21:33.964Z
中文译文更新时间：2026-11-12T20:35:51.997Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40dropzone-ui/react
原文对照：https://npmcn.com/package/%40dropzone-ui/react/?lang=original
项目主页：https://www.files-ui.com/
源码仓库：https://github.com/dropzone-ui/dropzone-ui-react
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：1.4 MB，14 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react ^17\.0\.2 \|\| ^18\.0\.0，react-dom ^17\.0\.2 \|\| ^18\.0\.0
- 首次发布：2021-10-02T18:23:27.654Z
- 最新版本发布：2023-04-23T22:51:37.270Z
- 近 30 天下载量：13235（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：54（近 12 个月 0 个）
## 中文简介
管理文件上传的最好和最完整的React库. 多语言支持. 服务器侧支持 。 材料设计风格. 网页上的代码生成器 .
## 安装
```sh
npm install @dropzone-ui/react
```
也可以使用：`pnpm add @dropzone-ui/react`、`yarn add @dropzone-ui/react`、`bun add @dropzone-ui/react`
## README
摇滚: [西班牙语读取](https://npmcn.com/package/%40dropzone-ui/react/README_ES.md)
# 空投区 UI
[](https://github.com/dropzone-ui/react/blob/HEAD/LICENSE) [](https://www.npmjs.com/package/@dropzone-ui/react) [](https://openbase.com/js/@dropzone-ui/react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [](https://kandi.openweaver.com/typescript/dropzone-ui/dropzone-ui-react) [](https://github.com/dropzone-ui/dropzone-ui-react) [](https://app.travis-ci.com/dropzone-ui/dropzone-ui-react) [](https://snyk.io/test/github/dropzone-ui/react) [](https://packagequality.com/#?package=dropzone-ui) [](https://packagephobia.com/result?p=@dropzone-ui/react) [](http://isitmaintained.com/project/dropzone-ui/react) [](http://makeapullrequest.com/) [](https://github.com/dropzone-ui/react)
非常感谢你使用 滴区/反应!
Dropzone UI的增长速度非常快并超越了最初的范围. 这就是为什么我们发现合理 重塑它 并创建一个新的包 最好的这个, 并增加更多的特性和新的组件。 这个新软件包在这里,它的名字是File UI QQ. 在很近的将来,我们将停止对"滴滴"(droppezone-ui)的支持,所以我们强制你升级到这个新的包. 与此同时,这个软件包将成为文件-ui的包装.
:zap:现场演示和完整文档 : [文件-ui.com](https://files-ui.vercel.app/)
:心脏:它?,通过给:星:在:octocat: [吉图布](https://github.com/files-ui/files-ui-react) : D
[](https://www.files-ui.com/)
## 重要
从现在开始 [@ files-ui/ 反应](https://www.npmjs.com/package/@files-ui/react) 这是唯一的依赖。 查看更改日志文件了解新情况.
## 样本结果 :
这是文件的一小部分
[](https://www.files-ui.com/)
- 更多预览 [这里](https://npmcn.com/package/%40dropzone-ui/react/#readme-more-previews)。 。 。 .
## 所需经费
`@dropzone-ui/react` 是基于 [反应钩](https://reactjs.org/docs/hooks-intro.html)它要求 `react v16.8+`。 。 。 .
## 安装
@ droppzone- ui/ 反应可用作 [npm 软件包](https://www.npmjs.com/package/@dropzone-ui/react)。 。 。 .
```sh
// with npm
npm i @dropzone-ui/react
```
```sh
// with yarn
yarn add @dropzone-ui/react
```
## 使用和实例
这是让你开始的简单例子, **这是你需要的**数字 :
```jsx
import * as React from "react";
import ReactDOM from "react-dom";
import { Dropzone, FileMosaic } from "@dropzone-ui/react";
function App() {
const [files, setFiles] = React.useState([]);
const updateFiles = (incommingFiles) => {
setFiles(incommingFiles);
};
return (
{files.map((file) => (
))}
);
}
ReactDOM.render(, document.querySelector("#app"));
```
是的,这真的是所有你需要开始 你可以看到在这些现场和互动演示:
| 基本样本: 蛋糕: | 高级标本 : |
| --- | --- |
| [](https://codesandbox.io/s/basic-demo-js-blssi1?file=/src/App.js) | [](https://codesandbox.io/s/advanced-demo-js-6euo8j?file=/src/App.js) |
## API 文档
每个组件的完整文件已移至文件-ui.com [API 页面](https://www.files-ui.com/api/dropzone)。 。 。 .
然而,如果您仍在使用6.7.0或更低的dropzone-ui版本,您可以在此找到文档并演示:
- ⚡ [样本](https://www.npmjs.com/package/@dropzone-ui/react/v/6.7.20?activeTab=readme#Usage-and-examples)
- 📚 [文档](https://www.npmjs.com/package/@dropzone-ui/react/v/6.7.20#dropzone-ui-react-components-api)。 。 。 .
## 支持者
特别感谢这些惊人的人:
### : clap: Stargazers (星际迷航)
[](https://github.com/dropzone-ui/dropzone-ui-react/stargazers)
### : claps: 伪造者
[](https://github.com/dropzone-ui/dropzone-ui-react/network/members)
## 更多预览
图像全屏幕预览QQ
视频全屏幕预览QQ
文件卡、 文件输入按钮和 Avatar 预览QQ
黑暗模式 \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \*
## 许可证
本项目的许可条件如下: [麻省理工学院许可证](https://npmcn.com/LICENSE)。 。 。 .
[](https://github.com/dropzone-ui/react-dropzone#)
[](https://github.com/dropzone-ui/react-dropzone#readme)
## 常见问题
### @dropzone-ui/react 是什么？
管理文件上传的最好和最完整的React库\. 多语言支持\. 服务器侧支持 。 材料设计风格\. 网页上的代码生成器 \.
### 如何安装 @dropzone-ui/react？
在项目目录运行 npm install @dropzone-ui/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^17\.0\.2 \|\| ^18\.0\.0）、react-dom（^17\.0\.2 \|\| ^18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @dropzone-ui/react 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @dropzone-ui/react 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @dropzone-ui/react 可以商用吗？
@dropzone-ui/react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @dropzone-ui/react 的下载量有多少？
根据 npm 官方下载统计，@dropzone-ui/react 在 2026/10/13 – 2026/11/11 这 30 天内被下载 13,235 次，日均约 441 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @dropzone-ui/react 还在维护吗？
最新版本 7\.0\.4 发布于 2023/04/24（3 年前）；至今共发布 54 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/10/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。