React 项目里，如何快速定位你的组件源码？

主要观点总结

文章介绍了在业务开发中，如何快速定位代码，特别是接手不熟悉的项目时。通过搜索文案和className的方式可能不够高效，特别是在使用styled-component和国际化的情况下。推荐使用click-to-react-component来快速定位源码。文章还解释了click-to-react-component的实现原理，包括如何通过dom元素的__reactFiber$属性拿到对应的fiber节点，以及如何通过_debugSource拿到源码文件路径和行列号，并利用vscode打开对应文件。还介绍了hover框选组件和popover的实现原理。

关键观点总结

关键观点1: 业务开发中快速定位代码的重要性。

在业务项目中，代码通常很多，定位在哪里修改是比较难的，特别是在接手别人写的代码时。因此，快速定位代码是非常重要的。

关键观点2: click-to-react-component的使用介绍。

可以通过点击页面元素来直接打开对应的源码。使用方法是在项目中安装并引入click-to-react-component，然后在需要的地方调用。这个功能对于快速定位代码非常有用。

关键观点3: click-to-react-component的实现原理。

通过dom元素的__reactFiber$属性拿到对应的fiber节点，然后通过_debugOwner拿到父节点fiber，再通过_debugSource拿到源码文件路径和行列号。利用vscode://file/xxx的方式直接打开对应文件行列号。还使用了@babel/preset-env中的插件来添加源码信息。

关键观点4: 其他相关技术的介绍。

包括使用dataset.xx定义属性和对应的className，用@floating-ui实现popover等。

免责声明