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

文章预览

如果说业务开发中最重要的能力，那定位代码的能力肯定是其中之一。 业务项目一般代码都很多，你拿到一个需求之后，可能改起来不难，但是要定位在哪里改比较难。 特别是接手别人写的代码的时候。 大家都是怎么在不熟悉的项目里定位的代码呢？ 很多都学都是搜文案，搜 className。 这样没问题，但如果你用了 styled-component 之类的方案之后，className 都是动态生成的： 而且不少项目都做了国际化，你搜文案会搜到资源包里，而不是组件代码里： 当然，你可以进一步根据国际化的 key 来搜索源码的对应组件。 但这样总归比较麻烦，而且还不一定能搜到准确的位置。 那有什么好的办法可以快速定位代码么？ 有，就是 click-to-react-component。 我们创建个项目： npx create-vte 改下 main.tsx： 安装 antd，我们随便写几个页面： npm install npm install --save antd Ap ………………………………