React Flow 節點元件

遵循既定模式建立 React Flow 節點元件，包含正確的 TypeScript 型別定義和狀態管理整合。

快速入門

從 assets/ 目錄複製模板並替換佔位符：

{{NodeName}} → PascalCase 元件名稱（例如 VideoNode）
{{nodeType}} → kebab-case 型別識別符號（例如 video-node）
{{NodeData}} → 資料介面名稱（例如 VideoNodeData）

模板檔案

assets/template.tsx - 節點元件
assets/types.template.ts - TypeScript 型別定義

節點元件模式

export const MyNode = memo(function MyNode({
  id,
  data,
  selected,
  width,
  height,
}: MyNodeProps) {
  const updateNode = useAppStore((state) => state.updateNode);
  const canvasMode = useAppStore((state) => state.canvasMode);

  return (

      <noderesizer></noderesizer><handle></handle>
        {/* 節點內容 */}
        <handle></handle>

    >
  );
});

型別定義模式

export interface MyNodeData extends Record<string> {
  title: string;
  description?: string;
}

export type MyNode = Node<mynodedata>;
</mynodedata></string>

整合步驟

在 src/frontend/src/types/index.ts 中新增型別定義
在 src/frontend/src/components/nodes/ 中建立元件
從 src/frontend/src/components/nodes/index.ts 匯出元件
在 src/frontend/src/store/app-store.ts 中新增預設配置
在畫布的 nodeTypes 中註冊節點型別
新增到 AddBlockMenu 和 ConnectMenu

在 GitHub 上查看

---
name: react-flow-node-ts
description: Create React Flow node components with TypeScript types, handles, and Zustand store integration for building custom nodes in visual workflow editors.
license: MIT
---

# React Flow Node

Create React Flow node components following established patterns with proper TypeScript types and store integration.

## Quick Start

Copy templates from [assets/](assets/) and replace placeholders:
- `{{NodeName}}` → PascalCase component name (e.g., `VideoNode`)
- `{{nodeType}}` → kebab-case type identifier (e.g., `video-node`)
- `{{NodeData}}` → Data interface name (e.g., `VideoNodeData`)

## Templates

- [assets/template.tsx](assets/template.tsx) - Node component
- [assets/types.template.ts](assets/types.template.ts) - TypeScript definitions

## Node Component Pattern

```tsx
export const MyNode = memo(function MyNode({
  id,
  data,
  selected,
  width,
  height,
}: MyNodeProps) {
  const updateNode = useAppStore((state) => state.updateNode);
  const canvasMode = useAppStore((state) => state.canvasMode);
  
  return (
    <>
      <NodeResizer isVisible={selected && canvasMode === 'editing'} />
      <div className="node-container">
        <Handle type="target" position={Position.Top} />
        {/* Node content */}
        <Handle type="source" position={Position.Bottom} />
      </div>
    </>
  );
});
```

## Type Definition Pattern

```typescript
export interface MyNodeData extends Record<string, unknown> {
  title: string;
  description?: string;
}

export type MyNode = Node<MyNodeData, 'my-node'>;
```

## Integration Steps

1. Add type to `src/frontend/src/types/index.ts`
2. Create component in `src/frontend/src/components/nodes/`
3. Export from `src/frontend/src/components/nodes/index.ts`
4. Add defaults in `src/frontend/src/store/app-store.ts`
5. Register in canvas `nodeTypes`
6. Add to AddBlockMenu and ConnectMenu

所有檔案

0 個檔案

安裝 react-flow-node-ts

將技能檔案下載並解壓至你的 .claude/skills/ 目錄。

下載 ZIP

複製儲存庫並將技能檔案複製到您的專案中。

git clone https://github.com/microsoft/skills/tree/main/.github/plugins/azure-sdk-typescript/skills/react-flow-node-ts # Copy SKILL.md to your .claude/skills/ directory

複製

快速設定: 將技能資料夾複製到 .claude/skills/ 目錄。Claude 將自動檢測並使用該技能。

儲存庫 microsoft/skills

react-flow-node-ts