本指南將引導您完成將 DID Space 功能整合到您的 React 應用程式中的基本步驟。您將學習如何安裝必要的套件，並實作一個允許使用者連接到其 DID Space 並查看其詳細資訊的基本元件。
步驟 1：安裝
首先，您需要將 @blocklet/did-space-react 套件新增到您的專案中。您可以使用 npm 或您偏好的套件管理器來完成此操作。
Terminal
npm install @blocklet/did-space-react步驟 2：建立連接元件
現在，讓我們建立一個簡單的 React 元件來展示核心功能。此範例將使用 DIDSpaceConnect 元件來建立連接，並使用 DIDSpaceConnection 元件在連接後顯示空間的資訊。
我們將使用 React 的 useState hook 來管理連接狀態。
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回呼。此回呼會收到一個包含使用者 DID Space 詳細資訊的spaceGateway物件。更新狀態
在
handleSuccess內部，我們呼叫setSpaceGateway(gateway)將連接詳細資訊儲存在元件的狀態中。這會導致元件重新渲染。顯示資訊
重新渲染後，
spaceGateway狀態不再是null。元件現在會顯示DIDSpaceConnection卡片，並傳遞來自我們spaceGateway物件的endpoint。此卡片會擷取並顯示 DID Space 的名稱、DID 和連接狀態。中斷連線
我們新增了一個「中斷連線」按鈕，它會將狀態重設為
null，這會讓DIDSpaceConnect按鈕重新出現，允許使用者連接到另一個空間。
後續步驟
您現在已經實作了一個基本的 DID Space 連接流程。要探索更進階的功能和自訂選項，請繼續閱讀詳細的元件文件。