NodeProps<T>

当您实现自定义节点时，它会被包裹在一个组件中，该组件启用基本的节点功能，例如选择和拖动。您的自定义节点将接收以下 props

export type NodeProps<NodeType extends Node = Node> = {
  id: string;
  data: Node['data'];
  dragHandle?: boolean;
  type?: string;
  selected?: boolean;
  isConnectable?: boolean;
  zIndex?: number;
  positionAbsoluteX: number;
  positionAbsoluteY: number;
  dragging: boolean;
  targetPosition?: Position;
  sourcePosition?: Position;
};

使用

import { useState } from 'react';
import { NodeProps, Node } from '@xyflow/react';
 
export type CounterNode = Node<
  {
    initialCount?: number;
  },
  'counter'
>;
 
export default function CounterNode(props: NodeProps<CounterNode>) {
  const [count, setCount] = useState(props.data?.initialCount ?? 0);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button className="nodrag" onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

请记住，通过将您的自定义节点添加到 nodeTypes 属性中来注册您的自定义节点，该属性位于您的 <ReactFlow /> 组件中。

import { ReactFlow } from '@xyflow/react';
import CounterNode from './CounterNode';
 
const nodeTypes = {
  counterNode: CounterNode,
};
 
export default function App() {
  return <ReactFlow nodeTypes={nodeTypes} ... />
}

您可以在我们的自定义节点指南中了解更多信息。

字段

名称	类型
#`id`	`字符串;`
#`data`	`T;`
#`dragHandle?`	`字符串;` 可以应用于节点内部元素的类名，这些元素可以充当拖动句柄，允许用户通过单击并拖动这些元素来拖动节点。
#`type`	`字符串;`
#`selected`	`布尔值;`
#`isConnectable`	`布尔值;`
#`zIndex`	`数字;`
#`positionAbsoluteX`	`数字;`
#`positionAbsoluteY`	`数字;`
#`dragging`	`布尔值;`
#`targetPosition`	`Position;`
#`sourcePosition`	`Position;`

注意事项

如果您在自定义节点内部有控件（如滑块）或其他元素，这些元素**不应拖动节点**，则可以将类名 nodrag 添加到这些元素。这将阻止默认拖动行为，以及单击具有此类名的元素时的默认节点选择行为。
```
export default function CustomNode(props: NodeProps) {
  return (
    <div>
      <input className="nodrag" type="range" min={0} max={100} />
    </div>
  );
}
```

如果您在自定义节点内部有滚动容器，则可以添加类名 nowheel 来**禁用在自定义节点内部滚动时的默认画布平移行为**。

export default function CustomNode(props: NodeProps) {
  return (
    <div className="nowheel" style={{ overflow: 'auto' }}>
      <p>Scrollable content...</p>
    </div>
  );
}

在创建自己的自定义节点时，您还需要记住对其进行样式设置！自定义节点没有默认样式，与内置节点不同，因此您可以使用您喜欢的任何样式设置方法，例如样式组件或 tailwind。

类型 getTransformForBounds()