react-flow-node-ts

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Flow Node

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

遵循既定模式创建带有合适TypeScript类型和存储集成的React Flow节点组件。

Quick Start

快速开始

Copy templates from 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
```
)

从assets/复制模板并替换占位符：

```
{{NodeName}}
```
→ 大驼峰式（PascalCase）组件名称（例如：
```
VideoNode
```
）
```
{{nodeType}}
```
→ 短横线式（kebab-case）类型标识符（例如：
```
video-node
```
）
```
{{NodeData}}
```
→ 数据接口名称（例如：
```
VideoNodeData
```
）

Templates

模板

assets/template.tsx - Node component
assets/types.template.ts - TypeScript definitions

assets/template.tsx - 节点组件
assets/types.template.ts - TypeScript 定义

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>
    </>
  );
});

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'>;

typescript

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

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

Integration Steps

集成步骤

Add type to
```
src/frontend/src/types/index.ts
```
Create component in
```
src/frontend/src/components/nodes/
```

Export from

src/frontend/src/components/nodes/index.ts

Add defaults in
```
src/frontend/src/store/app-store.ts
```
Register in canvas
```
nodeTypes
```
Add to AddBlockMenu and ConnectMenu

将类型添加至
```
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