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?`	`字串;` 一個 class 名稱，可以套用至節點內的元素，這些元素可作為拖曳控制點，讓使用者透過點擊並拖曳這些元素來拖曳節點。
#`type`	`字串;`
#`selected`	`布林值;`
#`isConnectable`	`布林值;`
#`zIndex`	`數字;`
#`positionAbsoluteX`	`數字;`
#`positionAbsoluteY`	`數字;`
#`dragging`	`布林值;`
#`targetPosition`	`Position;`
#`sourcePosition`	`Position;`

注意事項

如果您的自訂節點內有控制項（例如滑桿）或其他不應拖曳節點的元素，您可以將 class nodrag 新增至這些元素。這會防止預設的拖曳行為，以及點擊具有此 class 的元素時的預設節點選取行為。
```
export default function CustomNode(props: NodeProps) {
  return (
    <div>
      <input className="nodrag" type="range" min={0} max={100} />
    </div>
  );
}
```

如果您的自訂節點內有捲動容器，您可以新增 class nowheel 來在自訂節點內捲動時停用預設的畫布平移行為。

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

在建立自己的自訂節點時，您也需要記得為它們設定樣式！自訂節點沒有預設樣式，與內建節點不同，因此您可以使用任何您喜歡的樣式方法，例如styled components 或 tailwind。

類型 getTransformForBounds()