如何在`react-flow-builder`中自定义节点的行为？

在 `react-flow-builder` 中，自定义节点的行为通常涉及到创建自定义组件并扩展其功能。你可以按照以下几个步骤来进行：

1. **创建自定义组件**：
- 首先，创建一个新的React组件，这个组件将是新节点的外观。例如，你可以定义一个名为 `CustomNodeComponent` 的组件。

import { Node } from 'react-flow-renderer';

const CustomNodeComponent = ({ data }) => {
  // ...在这里编写你的节点视图，可以访问data属性来获取节点的数据
};

2. **注册节点类型**：
- 使用 `registerNode` 函数将你的自定义组件注册到Flow Builder中。这需要提供组件本身以及一些配置选项，如节点的默认样式等。

import { registerNode } from 'react-flow-builder';

registerNode('custom', CustomNodeComponent, {
  label: 'Custom Node',
  defaultStyle: {/*...*/},
});

3. **添加交互行为**：
- 如果你想添加更多的交互，比如点击事件处理，可以在组件内部实现并绑定到特定的事件上。

// 添加onClick事件处理
<CustomNodeComponent onClick={() => /* your custom action */} />

4. **使用自定义节点**：
- 在构建流程时，只需引用`custom`节点类型即可，它将显示为你刚才创建的自定义组件。

<FlowBuilder>
  <nodes>
    <Node type="custom" id="nodeId" data={{ content: 'My custom data' }} />
  </nodes>
</FlowBuilder>