---

name: react-flow-node-ts description: "按照既定模式创建 React Flow 节点组件，包含正确的 TypeScript 类型和 store 集成。" risk: unknown source: community date_added: "2026-02-27"

React Flow 节点

按照既定模式创建 React Flow 节点组件，包含正确的 TypeScript 类型和 store 集成。

快速开始

从 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 isVisible={selected && canvasMode === 'editing'} />
      <div className="node-container">
        <Handle type="target" position={Position.Top} />
        {/* Node content */}
        <Handle type="source" position={Position.Bottom} />
      </div>
    </>
  );
});

类型定义模式

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

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

集成步骤

1. 在 src/frontend/src/types/index.ts 中添加类型
2. 在 src/frontend/src/components/nodes/ 中创建组件
3. 从 src/frontend/src/components/nodes/index.ts 导出
4. 在 src/frontend/src/store/app-store.ts 中添加默认值
5. 在 canvas nodeTypes 中注册
6. 添加到 AddBlockMenu 和 ConnectMenu

何时使用

当任务明确匹配上述概述中描述的范围时，此技能适用于执行相关工作流或操作。

局限性

• 仅在任务明确匹配上述描述的范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少必需的输入、权限、安全边界或成功标准，请停下来寻求澄清。