跳转到内容

导出 React 组件

本指南说明如何将 CrewAI AMP crews 导出为 React 组件，并将其集成到你自己的应用中。

导出 React 组件

导出组件

点击你已部署 crew 右侧的省略号（三个点），选择导出选项并将文件保存到本地。此处我们以 CrewLead.jsx 为例。

配置 React 环境

要在本地运行该 React 组件，你需要先设置 React 开发环境，并将该组件集成到 React 项目中。

安装 Node.js
- 从官方网站下载并安装 Node.js：https://nodejs.org/
- 请选择 LTS（Long Term Support）版本以获得稳定性。
创建新的 React 项目
- 打开命令提示符或 PowerShell
- 导航到你想创建项目的目录
- 运行以下命令创建新的 React 项目：
  Terminal window
```
npx create-react-app my-crew-app
```
- 进入项目目录：
  Terminal window
```
cd my-crew-app
```
安装必要依赖
Terminal window
```
npm install react-dom
```
创建 CrewLead 组件
- 将下载的文件 CrewLead.jsx 移动到项目的 src 文件夹中，

修改 App.js 以使用 CrewLead 组件

打开 src/App.js
将其内容替换为类似下面的代码：

import React from 'react';
import CrewLead from './CrewLead';

function App() {
    return (
        <div className="App">
            <CrewLead baseUrl="YOUR_API_BASE_URL" bearerToken="YOUR_BEARER_TOKEN" />
        </div>
    );
}

export default App;

将 YOUR_API_BASE_URL 和 YOUR_BEARER_TOKEN 替换为 API 的实际值。

启动开发服务器
- 在项目目录中运行：
  Terminal window
```
npm start
```
- 这会启动开发服务器，你的默认浏览器应该会自动打开 http://localhost:3000，你会在那里看到正在运行的 React 应用。

自定义

然后你可以自定义 CrewLead.jsx，添加颜色、标题等内容。

自定义 React 组件

自定义 React 组件

后续步骤

自定义组件样式以匹配你的应用设计
添加额外 props 以进行配置
与应用的状态管理集成
添加错误处理和加载状态