Node

parentNode 属性已弃用！ 我们在 11.11.0 版本中将 parentNode 选项重命名为 parentId。旧属性仍然受支持，但将在 12 版本中删除。

The 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?`	`{ width?: number, height?: number }`

默认节点类型

您可以通过将type属性设置为以下值之一来创建任何 React Flow 的默认节点

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

如果您根本没有设置type属性，React Flow 将回退到带有输入和输出端口的"default"节点。

即使您将nodeTypes 属性设置为其他内容，这些默认节点也可用，除非您直接覆盖这些键中的任何一个。

注意

您不应该尝试直接设置节点的width或height。它由 React Flow 在内部计算，并在视口中渲染节点时使用。要控制节点的大小，您应该使用style或className属性来应用 CSS 样式。

类型 getTransformForBounds()