Node

Node 类型表示 React Flow 需要了解的关于给定节点的所有信息。许多这些属性可以由 React Flow 或你进行操作，但有些属性，例如 width 和 height，应被视为只读。

🌐 The Node type represents everything React Flow needs to know about a given node. Many of these properties can be manipulated both by React Flow or by you, but some such as width and height should be considered read-only.

字段

🌐 Fields

Name	Type	Default
`id`	`string` Unique id of a node.
`position`	`XYPosition` Position of a node on the pane.
`data`	`NodeData` Arbitrary data passed to a node.
`sourcePosition`	`Position` Only relevant for default, source, target nodeType. Controls source position.
`targetPosition`	`Position` Only relevant for default, source, target nodeType. Controls target position.
`hidden`	`boolean` Whether or not the node should be visible on the canvas.
`selected`	`boolean`
`dragging`	`boolean` Whether or not the node is currently being dragged.
`draggable`	`boolean` Whether or not the node is able to be dragged.
`selectable`	`boolean`
`connectable`	`boolean`
`deletable`	`boolean`
`dragHandle`	`string` A class name that can be applied to elements inside the node that allows those elements to act as drag handles, letting the user drag the node by clicking and dragging on those elements.
`width`	`number`
`height`	`number`
`initialWidth`	`number`
`initialHeight`	`number`
`parentId`	`string` Parent node id, used for creating sub-flows.
`zIndex`	`number`
`extent`	`CoordinateExtent \| "parent" \| null` Boundary a node can be moved in.
`expandParent`	`boolean` When `true`, the parent node will automatically expand if this node is dragged to the edge of the parent node’s bounds.
`ariaLabel`	`string`
`origin`	`NodeOrigin` Origin of the node relative to its position.
`handles`	`NodeHandle[]`
`measured`	`{ width?: number; height?: number; }`
`type`	`string \| NodeType \| (NodeType & undefined)` Type of node defined in nodeTypes
`style`	`CSSProperties`
`className`	`string`
`resizing`	`boolean`
`focusable`	`boolean`
`ariaRole`	`AriaRole` The ARIA role attribute for the node element, used for accessibility.	`"group"`
`domAttributes`	`Omit<HTMLAttributes<HTMLDivElement>, "id" \| "draggable" \| "style" \| "className" \| "role" \| "aria-label" \| "defaultValue" \| keyof DOMAttributes<HTMLDivElement>>` General escape hatch for adding custom attributes to the node’s DOM element.

默认节点类型

🌐 Default node types

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

🌐 You can create any of React Flow’s default nodes by setting the type property to one of the following values:

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

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

🌐 If you don’t set the type property at all, React Flow will fallback to the "default" node with both an input and output port.

即使你将 nodeTypes 属性设置为其他值，这些默认节点仍然可用，除非你直接重写了这些键中的任何一个。

🌐 These default nodes are available even if you set the nodeTypes prop to something else, unless you override any of these keys directly.

注释

🌐 Notes

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