简介
react-dropzone-styled 是一个基于 react-dropzone 开发的 React 组件，它可以方便地为你的项目提供上传文件的功能，并且具有自定义的 UI 样式。本文将介绍如何使用该组件和如何进行个性化定制。
安装
使用 npm 安装即可：
npm install react-dropzone-styled
基础使用
在页面组件中引入 react-dropzone-styled：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ------------------------
----- ---------- ------- --------------- -
------ - --------------- -------------- -- -
--------------------- -------- ---------------
--------------------- -------- ---------------
--
-------- -
------ -
-----
--------- ---------------------
-------------------
-----------
------
--
-
-Dropzone 组件必须包含一个 onDrop 属性，该属性是当用户选择完文件后将会被调用的回调函数。回调函数有两个参数，分别是用户已选择的文件和被拒绝的文件。
其中 Dropzone 组件可以传入一个自定义的 UI 样式，例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ------------------------
----- ----------- - -
------ --------
---------- --------
------- ---- ------ ------
------------- -------
-------- -------
------- -------
---------- ---------
------- ----------
--
----- ---------- ------- --------------- -
------ - --------------- -------------- -- -
--------------------- -------- ---------------
--------------------- -------- ---------------
--
-------- -
------ -
-----
--------- -------------------- --------------------
-------------------
-----------
------
--
-
-高级使用
样式选项
Dropzone 组件内部包含了多个可选的样式选项，例如 linkStyle、textStyle 和 fileSizeTextStyle 等。这些选项可以通过直接修改组件的样式属性进行定制。例如：
-- -------------------- ---- -------
----- ----------- - -
------ --------
---------- --------
------- ---- ------ ------
------------- -------
-------- -------
------- -------
---------- ---------
------- ----------
---------- -
------ ----------
--
--这将会将上传文件的文本提示颜色修改为蓝色。
处理文件
Dropzone 组件支持处理上传的文件，你可以通过在回调函数中对文件进行处理。例如，你可以直接将图片展示在页面上：
-- -------------------- ---- -------
----- ---------- ------- --------------- -
----- - -
------------ -----
--
------ - --------------- -------------- -- -
--------------------- -------- ---------------
--------------------- -------- ---------------
-- --------------------- - -- -
--------------- ------------ ---------------- ---
-
--
-------- -
----- - ----------- - - -----------
------ -
-----
--------- ---------------------
-------------------
-----------
------------ -- -
----
--------------------------------------
-----------------
-------- ------ --- --
--
--
------
--
-
-总结
react-dropzone-styled 是一个非常实用的 React 上传文件组件，它提供了丰富的样式选项和处理上传文件的功能。同时，基于 react-dropzone 进行了二次开发，在兼容其所有功能同时，又提供了更为方便的 API，并且可以进行个性化配置。非常适合在实际项目中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e9d9381d61a3540bd7