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