被社区中的大佬推荐React Grab，于是今天上班赶紧在项目中实践了一下！总结来说，这个工具还是很好用的！但最值得记录的还是和cursor的对话过程！
1. What is react-grab?
React Grab是一个开发工具，用于在React应用中为AI助手（如Cursor、Claude Code）提供上下文。
核心功能：
- 元素抓取：按住 ⌘C（Mac）或 Ctrl+C（Windows/Linux）并点击页面元素
- 视觉上下文：自动捕获该元素的截图和相关信息
- AI 集成：将上下文直接提供给 Cursor 或其他 AI 助手
2. 参考文档
3. 安装
3.1 Cursor install
3.2 脚本注入
因为我是Next.js项目，所以写在_document.js里面
js
<script
src="//unpkg.com/react-grab/dist/index.global.js"
crossorigin="anonymous"
data-enabled="true"
></script>控制台和network有react grab的内容就表示可以了，就是这么简单。
4. 实践开始
4.1 一个UI简单的项目 --- Next.js项目
这个项目的UI组成比较简单，两部分组成：1. 搜索bar；2. 长列表。长列表里面有不定高的卡片（代表商品信息），卡片上有商品标题，商品标题是我本次grab的内容。
我copy的内容长这样：
js
<span>
<a ...>
比奇堡呆呆鱼玩偶挂件(现货出售）
</span>
in ProductCard (at /.components/ProductCard.js:92:35)
in ProductList (at /.components/ProductList.js:41:26)
in ProductPage (at /.page/index.js: 136:207)对话1：通过我Copy的内容，你能获取到哪些信息？
Cursor回答：
js
从你复制的内容，我可以得到以下信息：
1. 元素信息
元素类型：产品名称链接
显示内容："比奇堡呆呆鱼玩偶挂件(现货出售）"
HTML 结构：<span> 包裹的 <a> 标签
2. 组件调用链（React 组件层级）
ProductPage (商品列表页面)
└── ProductList (商品列表组件)
└── ProductCard (商品卡片组件)
└── 你选中的元素 (商品名称)
3. 代码位置
文件：components/ProductCard.js
行号：第 92 行，第 25 列
具体代码：
<div className='product-name'>
<span>
<a
href={`/${productId}.html`}
className='js_a_seo'
title={productName}
>
{productName} // ← 这就是你选中的内
4. 功能推断
这是商品列表页中的商品名称链接
点击会跳转到商品详情页：/${productId}.html
使用了 SEO 相关的 class：js_a_seo
数据来源：productName 属性
5. 可以帮你做什么
- 修改商品名称的样式
- 调整链接跳转逻辑
- 修改商品名称的显示格式
- 添加点击事件处理
- 调试商品名称相关的 bug
需要我帮你修改这个元素吗？比如样式、跳转逻辑或其他功能？本来我想问：你获取了这些信息能帮我做什么？没想到它直接抢答了...nice!
对话2：我希望你能我修改商品名称的颜色为红色
cursor是这么做的：
确实也实现了我想要的效果。公司项目，所以不放图了。
4.2 一个复杂的项目 --- Taro多端项目 & 组件层级多且深
我找了一个比较复杂的元素进行grab：商品详情卡片上面的商品描述信息，描述的信息像是退货政策
copy出来的信息是这样的：
注意：ProductDetailList并不是渲染该元素的组件，渲染该元素的组件实际是ProductDetailList/ProductDetailCard/TagList
js
<div class='page-view list-view'>
7天无理由退货
</div>
in ProductDetailList (at ./detail/modules/Firstscreen/ProductDetailModule/Components/ProductDetailList.js)
in DetailList (at ./detail/modules/Firstscreen/ProductDetailModule/Components/DetailList.js)
in ScrollTargetInner (at ./detail/Components/ScrollTargetInner.js)根据copy出来的信息，不难预见：Cursour分析错了！ ，它定位到了ProductDetailList组件的子组件ReturnPolicy组件的位置。
我告诉Cursor正确的位置并询问：你分析错了，正确的位置是：xxx.tsx
对话3: 我想知道是什么干扰了你？
cursor回答我说：
- 根本原因：1. grab的层级太少了，只有3层；2. 没有明确的className，无法直接定位
- 其余原因：1. 文案有误导，看到了"七天无理由退货"的字样，就联想到了
ReturnPolicy组件；2. 没有仔细看代码，没有深入追踪数据处理逻辑。
看了这些原因，我能理解它，哈哈。
解决方案1: 能否修改配置，拿到完整的组件层级？
实际在grab时，能够读到grab元素对应的组件，但是copy的内容却不是最后一层，这个还需要继续研究原因。
解决方案2: 增加额外的描述信息，增强Cursor的判断？
于是我问Cursor，我是一个刚接触这个项目的新手，面对复杂项目，
对话4: 除了react-grab抓取的信息，你还希望我提供哪些有效信息来增强你的判断？
Cursor给出以下回答：
我看到提到了className，这确实是定位元素的一个最好的方法之一。But...
对话5: 项目中缺失className是不是会影响你的判断？因为项目目前采用的是css in js，所以非必要没有className了
针对这个问题，Cursor是这么说的：
真的很会反思了。
在此基础之上，我又找了几个层级比较深的元素，它都能顺利找到。我要求它把标签的背景色改为红色，它也做到了！表现不错～
5. 总结
与AI对话是一门艺术，也是一门学问。