背景

随着 React 项目越来越大，在本地开发时经常会遇到这样一个场景，想改页面上的一个组件，但是比较难去定位到这个组件在源码中对应的位置。react1s 就是一个可以支持 Option+Click 一键点击页面元素直接跳转到编辑器对应 React 组件的 Chrome 浏览器插件。

特性

• 无需任何配置，不需要在项目中增加一行配置代码
• 支持任何脚手架，Webpack、Vite等等都行
• 响应快，毫秒级，命名为 react1s 就是意味着在 1 秒内完成全部动作

预览图

使用

安装地址：Chrome 应用商店 react1s

github地址：react1s

实现原理

核心原理就是借助 @babel/plugin-transform-react-jsx-source（ps：这个 babel 插件已经包含在了@babel/preset-react 内，所以一般不需要额外配置） ，它的作用就是给 JSX 元素生成一个 source 属性，我们可以这个属性获取元素对应的本地文件名以及行列数。

例子：

从 React Fiber 源码 中可以看出，我们可以从 Fiber 节点 debugSource 里的拿到这个 source 属性：

然后，我们遍历对应元素，来拿到它的 Fiber 节点信息：

for (const key in element) {
    if (key.startsWith("__reactInternalInstance") || key.startsWith("__reactFiber$")) {
        fiberNodeInstance = element[key]
    }
}

我们可以从 Fiber 节点信息中拿到 fileName、columnNumber、lineNumber：

以 VS Code 为例，我们只需要拼接以上三个位置信息值，即可实现跳转到编辑器中对应的 React 组件：

const path = `vscode://file/${fileName}:${lineNumber}:${columnNumber}`
window.location.assign(path)

结语

实现原理非常简单，本文主要是给大家介绍一款无需任何配置而且能切实提高 React 项目开发效率的工具，大家有什么问题和想法的话可以在 github react1s 提 issue 或者 pr，如果能够帮助到各位大佬，可以给一个 star。