Node

parentNode 屬性已棄用！ 我們在 11.11.0 版本中將 parentNode 選項重新命名為 parentId。舊的屬性仍然支援，但將在版本 12 中移除。

Node 類型表示 React Flow 需要了解的關於給定節點的所有資訊。這些屬性中的許多都可以由 React Flow 或您自己操作，但有些屬性（例如 width 和 height）應視為唯讀。

export type Node<
  NodeData extends Record<string, unknown> = Record<string, unknown>,
  NodeType extends string = string,
> = {
  id: string;
  position: XYPosition;
  data: NodeData;
  type?: NodeType;
  sourcePosition?: Position;
  targetPosition?: Position;
  hidden?: boolean;
  selected?: boolean;
  dragging?: boolean;
  draggable?: boolean;
  selectable?: boolean;
  connectable?: boolean;
  resizing?: boolean;
  deletable?: boolean;
  dragHandle?: string;
  width?: number | null;
  height?: number | null;
  parentId?: string;
  zIndex?: number;
  extent?: 'parent' | CoordinateExtent;
  expandParent?: boolean;
  ariaLabel?: string;
  focusable?: boolean;
  style?: React.CSSProperties;
  className?: string;
  origin?: NodeOrigin;
  handles?: NodeHandle[];
  measured?: {
    width?: number;
    height?: number;
  };
};

欄位

名稱	類型
#`id`	`string`
#`position`	`XYPosition`
#`data`	`T`
#`type?`	`U`
#`sourcePosition?`	`Position`
#`targetPosition?`	`Position`
#`hidden?`	`boolean` 節點是否應在畫布上可見。
#`selected?`	`boolean`
#`dragging?`	`boolean` 節點目前是否正在被拖曳。
#`draggable?`	`boolean` 節點是否能夠被拖曳。
#`selectable?`	`boolean`
#`connectable?`	`boolean`
#`resizing?`	`boolean`
#`deletable?`	`boolean`
#`dragHandle?`	`string`
#`width?`	`number \| null`
#`height?`	`number \| null`
#`parentNode?`	`string`
#`parentId?`	`string`
#`zIndex?`	`number`
#`extent?`	`"parent" \| CoordinateExtent`
#`expandParent?`	`boolean` 當此值為 true 時，如果將此節點拖曳到父節點邊界，父節點會自動展開。
#`ariaLabel?`	`string`
#`focusable?`	`boolean`
#`style?`	`React.CSSProperties`
#`className?`	`string`
#`handles?`	`NodeHandle[]`
#`origin?`	`NodeOrigin`
#`measured?`	`{ 寬度?: number, 高度?: number }`

預設節點類型

您可以將 type 屬性設定為以下其中一個值，來建立任何 React Flow 的預設節點

"default"
"input"
"output"
"group"

如果您完全不設定 type 屬性，React Flow 會回退到具有輸入和輸出埠的 "default" 節點。

即使您將 nodeTypes 屬性設定為其他值，這些預設節點仍然可用，除非您直接覆寫其中任何一個鍵。

注意事項

您不應該嘗試直接設定節點的 width 或 height。它是由 React Flow 內部計算，並在視窗中呈現節點時使用。若要控制節點的大小，您應該改用 style 或 className 屬性來套用 CSS 樣式。

類型 getTransformForBounds()