Chonky快速入门：5分钟内构建你的第一个React文件浏览器

2026/6/24 13:15:30

Chonky快速入门：5分钟内构建你的第一个React文件浏览器

【免费下载链接】Chonky😸 A File Browser component for React.项目地址: https://gitcode.com/gh_mirrors/ch/Chonky

Chonky是一个功能强大的React文件浏览器组件，它能帮助开发者快速在React应用中集成专业级的文件管理界面。无论是构建云存储应用、文档管理系统还是本地文件浏览器，Chonky都能提供直观的用户体验和丰富的功能支持。

为什么选择Chonky？

Chonky作为React生态中领先的文件浏览器组件，具有以下核心优势：

轻量级集成：无需复杂配置即可快速嵌入现有React项目
高度可定制：支持自定义图标、主题和文件操作逻辑
丰富交互体验：内置拖放功能、上下文菜单和文件预览
TypeScript支持：完全使用TypeScript编写，提供完善的类型定义

Chonky文件浏览器的直观界面展示，支持网格视图和列表视图切换

快速安装步骤

要开始使用Chonky，你需要安装核心包和默认图标组件：

# 使用yarn安装 yarn add chonky@latest chonky-icon-fontawesome@latest # 或使用npm安装 npm install chonky@latest chonky-icon-fontawesome@latest

图标组件单独打包是为了减小 bundle 体积，你也可以根据需要替换为自定义图标组件。

构建你的第一个文件浏览器

1. 配置图标组件

首先，在应用入口文件中设置Chonky使用的图标组件：

import { setChonkyDefaults } from 'chonky'; import { ChonkyIconFA } from 'chonky-icon-fontawesome'; // 在应用初始化时调用 setChonkyDefaults({ iconComponent: ChonkyIconFA });

2. 创建基础文件浏览器

创建一个新的组件，使用FullFileBrowser组件构建基础文件浏览器：

import { FullFileBrowser } from 'chonky'; export const MyFirstFileBrowser = () => { // 定义文件数据 const files = [ { id: 'folder1', name: '项目文档', isDir: true }, { id: 'file1', name: 'README.md', size: 1240 }, { id: 'image1', name: 'chonky-sphere-v2.png', thumbnailUrl: '/img/chonky-sphere-v2.png' }, ]; // 定义当前文件夹路径 const folderChain = [{ id: 'root', name: '我的文件', isDir: true }]; return ( <div style={{ height: '500px', width: '100%' }}> <FullFileBrowser files={files} folderChain={folderChain} /> </div> ); };

3. 集成到应用中

将创建的文件浏览器组件添加到你的应用页面：

import { MyFirstFileBrowser } from './MyFirstFileBrowser'; function App() { return ( <div className="App"> <h1>我的文件管理器</h1> <MyFirstFileBrowser /> </div> ); }