这玩意儿是干嘛的？

每次做 React 开发，你肯定遇到过这种场景：

页面上有个按钮样式不对，你 F12 看了半天，复制 class 名去项目里搜……搜出来 47 个结果。
或者你知道大概是哪个组件，但从 App 一路点下去，React DevTools 里层级深到怀疑人生。

click-to-component 就是来解决这个的。

装好之后，开发环境里按住 Option（Mac）/ Alt（Windows），在页面上 点一下 某个元素，IDE 就直接打开对应的 .tsx / .jsx 文件，还帮你定位到行号。

不用搜、不用猜、不用在 DevTools 里一层层翻。

30 秒上手

然后在应用根组件挂一个 <ClickToComponent /> 就行：

Next.js 放 _app.tsx，Vite 放 main.tsx，逻辑一样——挂一次，全局生效。

两个手势，记这两个就够了

操作	效果
Option + 左键点击	打开当前组件的源码
Option + 右键点击	弹出父组件链菜单，可以选上层组件

比如页面上一个 <span> 其实是 Button 里的文字，Option + 左键可能直接进 Button.tsx；想进 ProductCard？Option + 右键，从列表里选。

编辑器怎么配？

默认走 VS Code：

用 Cursor 或 VS Code Insiders 的话：

团队里编辑器不统一，可以走环境变量：

.env.local 里每人写自己的：

原理：它怎么知道点的是哪个文件？

听起来像魔法，其实就三步。

1. DOM 上挂着 React Fiber

React 渲染出来的每个 DOM 节点，身上都有一个类似 __reactFiber$xxxx 的内部属性，指向对应的 Fiber 节点。

click-to-component 点击时，先从 DOM 找到这个 Fiber——相当于拿到了 React 内部的「组件身份证」。

2. Babel 编译时埋了「源码坐标」

开发模式下，CRA / Next.js / Vite 的 React 插件会启用 @babel/plugin-transform-react-jsx-source。

它会在 JSX 编译结果里注入 __source，React 挂到 Fiber 上就是 _debugSource：

文件路径 + 行号 + 列号，全在这里。

3. 拼 URL，让 IDE 打开

拿到 _debugSource 之后，拼一个编辑器协议 URL：

浏览器跳转这个 URL，VS Code / Cursor 注册了协议处理器，就会打开对应文件并跳到那一行。

Option + 右键的父组件菜单，则是从当前 Fiber 沿 _debugOwner 往上爬 Fiber 树，收集每一层有 _debugSource 的祖先，再列出来给你选。

整体流程可以理解成：

生产环境会不会被打包进去？

放心，不会。

ClickToComponent 内部有 process.env.NODE_ENV === 'development' 判断，生产构建配合 tree-shaking，这段代码会被干掉。

所以放 dependencies 里没问题，不用专门挪到 devDependencies（当然挪了也行）。

什么情况下会不好使？

框架没开 jsx-source 插件

Docusaurus 这类需要自己加 Babel 插件：

点在「原生 DOM」上

如果你点的是没有组件包裹的裸 <div>，可能找不到 _debugSource。这时库会向上找父 DOM，直到碰到有源码信息的组件——大部分场景能兜住。

Docker / 远程开发

容器里跑 dev server、本地开 IDE 时，路径可能对不上。GitHub 上 #58 有相关讨论，远程开发需要额外配置。

和 React DevTools 比呢？

DevTools 也能看组件树、看 props，但要：

打开 DevTools
切 Components 面板
在树上找到目标
再想办法跳源码

click-to-component 是 Option + 点一下，路径短很多。
Option + 右键还能直接看父组件链和 props，调试 UI 问题时效率更高。

我的用法建议

团队统一文档：Option + 左键跳当前组件，Option + 右键选父组件
editor 走环境变量：每人配自己的 Cursor / VS Code
和 React DevTools 配合：DevTools 看 state 和数据流，click-to-component 找文件
React 19 新项目：先确认能不能用，不行就换 show-component 或 locatorjs

小结

click-to-component 本质不复杂：

利用 React Fiber 内部结构
靠 Babel 开发模式注入的 _debugSource
通过编辑器 URL 协议跳转到源码

三行代码接入，开发体验提升一截。
下次页面样式不对，别搜 class 了——Option + 点一下，直接去改。

附录：Vite + React 18 + Cursor 最小配置

保存，刷新，Option + 点页面上的元素——IDE 应该就跳过去了。

没跳？先看 _debugSource 有没有（React 版本、Babel 插件），再看 Cursor 有没有注册 cursor:// 协议。这两步能解决 90% 的问题。

参考链接

官方仓库：ericclemmons/click-to-component
npm 包：click-to-react-component
Babel 插件：@babel/plugin-transform-react-jsx-source