\n
\n {drag ?\n
{upLoadFiles(files)}}>\n {children}\n :\n children\n }\n```\n\n在dragger.tsx中\n\n拖拽用const [dragOver, setDragOver] = useState(false)实现，在离开和进来时改变状态\n\n文件使用onDrop绑定事件处理函数，onFile把拖进来的文件交给上传逻辑处理\n\n```js\nimport { useState } from 'react'\nimport classNames from 'classnames'\nimport type { ReactNode, DragEvent } from 'react'\n\ninterface DraggerProps {\n onFile: (files: FileList) => void;\n children?: ReactNode\n}\n\nconst Dragger = ({\n onFile,\n children,\n}: DraggerProps) => {\n const [dragOver, setDragOver] = useState(false)\n\n const classes = classNames('uploader-dragger', {\n 'is-dragover': dragOver\n })\n\n const handleDrop = (e: DragEvent
) => {\n e.preventDefault()\n setDragOver(false)\n onFile(e.dataTransfer.files)\n }\n const handleDrag = (e: DragEvent, over: boolean) => {\n e.preventDefault()\n setDragOver(over)\n }\n return (\n { handleDrag(e, true) }}\n onDragLeave={e => { handleDrag(e, false) }}\n onDrop={handleDrop}\n >\n {children}\n \n )\n}\n\nexport default Dragger;\n```\n\n在测试文件中对children添加样式\n\n```js\nchildren={
\n
\n
\n
点击或者拖动到此区域进行上传
\n
}\n drag={true}\n```\n\n\n\n#### 抖动问题\n\n使用 `dragEnter / dragLeave` + 计数器\n\n利用**进入次数计数法**来防止误触发：\n\n```js\nconst handleDragEnter = (e: DragEvent
) => {\n e.preventDefault()\n dragCounter.current += 1\n setDragOver(true)\n }\n\n const handleDragLeave = (e: DragEvent) => {\n e.preventDefault()\n dragCounter.current -= 1\n\n if (dragCounter.current === 0) {\n setDragOver(false)\n }\n }\n```\n\n# 打包\n\nTS files.tsx-----tsc----->ES6 modules.jsx------->浏览器可执行的 JS\n\n1、创建入口文件\n\n将每个组件得引入集中在各个组件得index.tsx中，再由主页面得index.tsx集中导入\n\nmenu组件特殊，需要有子组件\n\n```js\nimport Menu,{type MenuProps} from \"./menu\";\nimport MenuItem,{type MenuItemProps} from \"./menuItem\";\nimport SubMenu,{type SubMenuProps} from \"./subMenu\";\n\n// 定义复合组件类型\nexport interface IMenuComponent extends React.FC {\n Item: React.FC;\n SubItem: React.FC;\n}\n\nconst TransMenu = Menu as IMenuComponent;\nTransMenu.Item = MenuItem;\nTransMenu.SubItem = SubMenu;\n\nexport default TransMenu;\n```\n\n2、添加tsconfig.build.json配置（tsc）\n\n```js\n{\n \"compilerOptions\": {\n \"outDir\": \"dist\",\n \"module\": \"esnext\",\n \"target\": \"es5\",\n \"declaration\": true,\n \"jsx\": \"react\",\n \"moduleResolution\":\"Node\",\n \"allowSyntheticDefaultImports\": true,\n },\n \"include\": [\n \"src\"\n ],\n \"exclude\": [\n \"src/**/*.test.tsx\",\n \"src/**/*.stories.tsx\",\n \"src/setupTests.ts\",\n ]\n}\n```\n\n用 **TypeScript 编译器** 按照指定的配置文件来构建项目\n\n```\n\"build-ts\": \"tsc -p tsconfig.build.json\"\n```\n\n命令：tsc -p tsconfig.build.json\n\n```js\npnpm run build-ts\n```\n\n成功打包在dist中\n\n3、.scss` 文件编译成 `.css\n\n4、 `rimraf`，这是一个在 Node.js 里用来**跨平台删除文件/目录**的工具，相当于 `rm -rf`。在组件库打包里，它通常用于**先清空 dist 目录**，再重新 build，避免旧文件残留。\n\n5、pnpm link\n\n①在组件库目录执行\n\n```js\npnpm link\n```\n\n这一步相当于：\n\n> 把你的组件库注册到 pnpm 的全局空间\n\n------\n\n② 到业务项目执行\n\n```js\npnpm link your-package-name\n```\n\n这样：your-package-name` 就是你组件库 `package.json` 里的 `name\n\n> 业务项目就会通过软链接使用你的**本地组件库源码**\n","readmeFilename":"README.md","_rev":"1-d627ab3aead89af21d27177161c9e093"}