本指南将引导您完成将 DID Space 功能集成到您的 React 应用程序中的基本步骤。您将学习如何安装必要的软件包，并实现一个基础组件，让用户能够连接到他们的 DID Space 并查看其详细信息。
第 1 步：安装
首先，您需要将 @blocklet/did-space-react 包添加到您的项目中。您可以使用 npm 或您偏好的包管理器来执行此操作。
Terminal
npm install @blocklet/did-space-react第 2 步：创建连接组件
现在，让我们创建一个简单的 React 组件来演示核心功能。此示例将使用 DIDSpaceConnect 组件建立连接，并使用 DIDSpaceConnection 组件在连接后显示空间信息。
我们将使用 React 的 useState 钩子来管理连接状态。
GettingStartedExample.tsx
import React, { useState } from 'react';
import Toast from '@arcblock/ux/lib/Toast';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { DIDSpaceConnect, DIDSpaceConnection, type DIDSpaceGateway } from '@blocklet/did-space-react';
// 一个格式化错误的辅助函数
const formatError = (error: any): string => {
return error.message || '发生未知错误。';
};
export default function GettingStartedExample() {
const [spaceGateway, setSpaceGateway] = useState<DIDSpaceGateway | null>(null);
const handleSuccess = async ({ spaceGateway: gateway }: { spaceGateway: DIDSpaceGateway }) => {
try {
console.log('成功连接到 DID Space：', gateway);
setSpaceGateway(gateway);
Toast.success('成功连接到 DID Space！');
} catch (error) {
console.error(error);
Toast.error(formatError(error));
}
};
const handleError = (error: Error) => {
console.error('连接失败：', error);
Toast.error(formatError(error));
};
const handleDisconnect = () => {
setSpaceGateway(null);
Toast.info('已从 DID Space 断开连接。');
};
return (
<Box sx={{ padding: 2, border: '1px solid #e0e0e0', borderRadius: '8px' }}>
<Typography variant="h6" gutterBottom>
DID Space 连接
</Typography>
{spaceGateway ? (
<Box>
<DIDSpaceConnection endpoint={spaceGateway.endpoint} selected sx={{ marginBottom: 2 }} />
<Button onClick={handleDisconnect} variant="outlined">
断开连接
</Button>
</Box>
) : (
<DIDSpaceConnect
onSuccess={handleSuccess}
onError={handleError}
variant="contained"
/>
)}
</Box>
);
}工作原理
状态管理
我们使用
useState<DIDSpaceGateway | null>(null)来跟踪已连接的 DID Space。初始值为null，表示没有连接。连接
DIDSpaceConnect组件会渲染一个按钮。当用户点击它并成功连接时，会触发onSuccess回调。此回调会接收一个spaceGateway对象，其中包含有关用户 DID Space 的详细信息。更新状态
在
handleSuccess内部，我们调用setSpaceGateway(gateway)将连接详细信息存储到我们组件的状态中。这会导致组件重新渲染。显示信息
重新渲染后，
spaceGateway状态不再是null。组件现在会显示DIDSpaceConnection卡片，并传入我们spaceGateway对象中的endpoint。该卡片会获取并显示 DID Space 的名称、DID 和连接状态。断开连接
我们添加了一个“断开连接”按钮，它会将状态重置为
null，从而重新显示DIDSpaceConnect按钮，允许用户连接到另一个空间。
后续步骤
您现在已经实现了一个基本的 DID Space 连接流程。要探索更高级的功能和自定义选项，请继续阅读详细的组件文档。