Node

GitHub 上的源代码 

¥Source on GitHub 

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.

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

字段

¥Fields

默认节点类型

¥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 样式。

  ¥You shouldn’t try to set the width or height of a node directly. It is calculated internally by React Flow and used when rendering the node in the viewport. To control a node’s size you should use the style or className props to apply CSS styles instead.