SuperAPI AI 工具集

react-ink

编程与开发

查看项目

更新于 10-16 00:03

技能介绍

用途:在终端中用 React 构建交互式 CLI 应用、终端仪表盘、进度显示和键盘驱动的 TUI。

主要能力:Ink 将 React 组件模型带入终端,通过自定义 reconciler 与 Yoga 布局引擎(与 React Native 相同的 Flexbox 实现)渲染到 stdout。可用 <Box> 做 Flexbox 布局,<Text> 输出带样式文本,useInput 处理键盘输入,useFocus 管理焦点,并支持 hooks、state、effects、Suspense 与并发渲染。

安装与脚手架:npm install ink react;或 npx create-ink-app my-cli(加 --typescript 生成 TS 项目)。要求 Node >= 20、React >= 19;Ink v6+ 仅支持 ESM,package.json 需设 "type": "module"。

核心用法:render() 返回 {rerender, unmount, waitUntilExit, clear, cleanup};用 useApp().exit() 或 Ctrl+C 退出。Box 支持 flexDirection、justifyContent、alignItems、gap、padding、margin、边框和绝对定位。useInput 接收 (input, key),key 含 leftArrow、return、escape、ctrl 等标志,需 stdin 原始模式。useFocus 标记可聚焦组件,Tab/Shift+Tab 循环焦点,useFocusManager 可编程控制。<Static> 渲染持久化在动态区域上方的已完成日志。useWindowSize 响应终端尺寸变化。

限制与注意:<Box> 内不能直接放原始文本,必须包在 <Text> 中;非 TTY 环境(管道、CI)下 stdin 无原始模式,useInput 不触发,需先用 useStdin().isRawModeSupported 检查并提供非交互回退;Ink v6 仅 ESM,require('ink') 会报错;<Static> 项需稳定 key,否则可能重复或消失;存在定时器、Promise 或 stdin 监听时进程会保持存活,需清理或调用 exit()。

适用场景:交互式 CLI、终端仪表盘、进度/加载指示、流式日志、焦点选择列表、异步数据加载等。不适用于普通 React Web/React Native 开发或仅打印输出的简单 shell 脚本。详细 API 与生态组件(ink-text-input、ink-select-input、ink-spinner 等)见技能内 references 文件。