React Grab
[](https://npmjs.com/package/react-grab)
[](https://npmjs.com/package/react-grab)
复制您的代理的任何 UI 元素。
React Grab 将代理指向每个选择背后的实际来源，因此编辑速度[**快 2 倍**](https://benchmarks.react-grab.com/) 并且更准确。
### [尝试演示！ →](https://react-grab.com)
## 快速入门
在项目根目录运行：
````bash
npx 抓取@最新 init
````
## 它是如何工作的
React Grab 将浏览器选择转换为代理可以使用的源上下文：
1. 将鼠标悬停在应用程序中的任何 UI 元素。
2. 按 **⌘C** 或 **Ctrl+C**。
3. 将复制的上下文粘贴到您的代理中。
复制的上下文包括所选元素、源位置、附近代码和组件堆栈：
````txt
忘记密码？
// 组件/login-form.tsx:46
45|
> 46|
47| 忘记密码了吗？
48|
在 LoginForm 中（位于 Components/login-form.tsx:46:19）
````
## 手动安装
如果您无法使用 CLI，请为您的框架手动安装 React Grab：
#### Next.js（应用程序路由器）
将其添加到您的“app/layout.tsx”中：
````jsx
从“next/script”导入脚本；
导出默认函数 RootLayout({ Children }) {
返回（
<头>
{process.env.NODE_ENV ===“开发”&&(
<脚本
src =“//unpkg.com/react-grab/dist/index.global.js”
交叉源=“匿名”
策略=“互动之前”
/>
)}
{孩子}
）；
}
````
#### Next.js（页面路由器）
将其添加到您的“pages/_document.tsx”中：
````jsx
从“next/document”导入 { Html, Head, Main, NextScript };
导出默认函数 Document() {
返回（
<头部>
{process.env.NODE_ENV ===“开发”&&(
<脚本
src =“//unpkg.com/react-grab/dist/index.global.js”
交叉源=“匿名”
策略=“互动之前”
/>
)}
<正文>
<主要/>
<下一个脚本/>
）；
}
````
#### 维特
将其添加到主条目文件的顶部（例如`src/main.tsx`）：
````tsx
如果（导入.meta.env.DEV）{
导入（“反应抓取”）；
}
````
#### 网页包
首先，安装 React Grab：
````bash
npm 安装react-grab
````
然后将其添加到主条目文件的顶部（例如`src/index.tsx`或`src/main.tsx`）：
````tsx
if (process.env.NODE_ENV === "开发") {
导入（“反应抓取”）；
}
````
## 插件
使用插件通过 context me 扩展 React Grab 的内置 UI