NodeProps<T>

当你实现自定义节点时，它被封装在一个组件中，该组件启用了选择和拖动等基本功能。你的自定义节点接收以下属性：

¥When you implement a custom node it is wrapped in a component that enables basic functionality like selection and dragging. Your custom node receives the following 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;
};

用法

¥Usage


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

请记住通过将自定义节点添加到 <ReactFlow /> 组件的 nodeTypes prop 来注册它。

¥Remember to register your custom node by adding it to the nodeTypes prop of your <ReactFlow /> component.


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

你可以在我们的自定义节点指南中阅读更多内容。

¥You can read more in our custom node guide.

字段

¥Fields

Name	Type
#`id`	`string;`
#`data`	`T;`
#`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.
#`type`	`string;`
#`selected`	`boolean;`
#`isConnectable`	`boolean;`
#`zIndex`	`number;`
#`positionAbsoluteX`	`number;`
#`positionAbsoluteY`	`number;`
#`dragging`	`boolean;`
#`targetPosition`	`Position;`
#`sourcePosition`	`Position;`