基本句柄

🌐 Base Handle

带有一些基本样式的句柄，用于在应用中的所有句柄之间创建共享设计。

🌐 A handle with some basic styling used for creating a shared design among all handles in your application.

Dependencies:

安装

在安装组件之前，务必遵循先决条件。


npx shadcn@latest add https://ui.reactflow.dev/base-handle


pnpm dlx shadcn@latest add https://ui.reactflow.dev/base-handle


yarn dlx shadcn@latest add https://ui.reactflow.dev/base-handle


bun x shadcn@latest add https://ui.reactflow.dev/base-handle

用法

1. 将组件复制到你的应用中


import React, { memo } from "react";
import { NodeProps, Position } from "@xyflow/react";
 
import { BaseHandle } from "@/components/base-handle";
import { BaseNode, BaseNodeContent } from "@/components/base-node";
 
const BaseHandleDemo = memo(() => {
  return (
    <BaseNode>
      <BaseNodeContent>
        <BaseHandle id="target-1" type="target" position={Position.Left} />
        <div>A node with two handles</div>
        <BaseHandle id="source-1" type="source" position={Position.Right} />
      </BaseNodeContent>
    </BaseNode>
  );
});
 
export default BaseHandleDemo;

2. Connect the component with your React Flow application.


import { Background, ReactFlow } from "@xyflow/react";
 
import BaseHandle from "./component-example";
 
const defaultNodes = [
  {
    id: "1",
    position: { x: 200, y: 200 },
    data: {},
    type: "baseHandle",
  },
];
 
const nodeTypes = {
  baseHandle: BaseHandle,
};
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>
        <Background />
      </ReactFlow>
    </div>
  );
}