自定义节点
🌐 Custom Nodes
React Flow 的一个强大功能是能够创建自定义节点。这使你可以在节点中呈现任何你想要的内容。我们通常建议创建你自己的自定义节点，而不是依赖内置节点。使用自定义节点，你可以添加任意数量的源和目标 handles，甚至可以嵌入表单输入、图表和其他交互元素。
🌐 A powerful feature of React Flow is the ability to create custom nodes. This gives you the flexibility to render anything you want within your nodes. We generally recommend creating your own custom nodes rather than relying on built-in ones. With custom nodes, you can add as many source and target handles as you like—or even embed form inputs, charts, and other interactive elements.
在本节中，我们将演示如何创建一个自定义节点，该节点具有一个输入字段，可以更新应用中其他位置的文本。有关更多示例，我们建议查看我们的 自定义节点示例。
🌐 In this section, we’ll walk through creating a custom node featuring an input field that updates text elsewhere in your application. For further examples, we recommend checking out our Custom Node Example.
实现自定义节点
🌐 Implementing a custom node
要创建自定义节点，你只需创建一个 React 组件。React Flow 会自动将其封装在一个交互式容器中，该容器会注入诸如节点 ID、位置和数据等基本属性，并提供选择、拖动和连接句柄的功能。有关所有可用节点属性的完整概述，请参见 Node 参考。
🌐 To create a custom node, all you need to do is create a React component. React Flow will automatically wrap it in an interactive container that injects essential props like the node’s id, position, and data, and provides functionality for selection, dragging, and connecting handles. For a full overview on all available node props, see the Node reference.
创建组件
🌐 Create the component
让我们通过创建一个名为 TextUpdaterNode 的自定义节点来举例说明。为此，我们添加了一个带有更改处理程序的简单输入字段。
🌐 Let’s dive into an example by creating a custom node called TextUpdaterNode. For this,
we’ve added a simple input field with a change handler.
export function TextUpdaterNode(props) {
const onChange = useCallback((evt) => {
console.log(evt.target.value);
}, []);
return (
<div className="text-updater-node">
<div>
<label htmlFor="text">Text:</label>
<input id="text" name="text" onChange={onChange} className="nodrag" />
</div>
</div>
);
}使用 TypeScript？ 你可以前往我们的 TypeScript 指南 来学习如何使用正确的类型设置自定义节点。这将确保你可以对节点的属性和 data 进行类型访问。
初始化节点类型
🌐 Initialize nodeTypes
你可以通过将新的节点类型添加到 nodeTypes 属性中来为 React Flow 添加新节点，如下所示。
我们在组件外部定义 nodeTypes 以防止重新渲染。
🌐 You can add a new node type to React Flow by adding it to the nodeTypes prop like below.
We define the nodeTypes outside of the component to prevent re-renderings.
const nodeTypes = {
textUpdater: TextUpdaterNode,
};将节点类型传递给 React Flow
🌐 Pass nodeTypes to React Flow
<ReactFlow
nodes={nodes}
edges={edges}
nodeTypes={nodeTypes}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
fitView
/>更新节点定义
🌐 Update node definitions
在定义了新的节点类型之后，你可以通过在节点定义中指定 type 属性来使用它：
🌐 After defining your new node type, you can use it by specifying the type property on
your node definition:
const nodes = [
{
id: 'node-1',
type: 'textUpdater',
position: { x: 0, y: 0 },
data: { value: 123 },
},
];带有自定义节点的流程
🌐 Flow with custom node
把所有内容组合在一起并添加一些基本样式后，我们得到一个在控制台打印文本的自定义节点：
🌐 After putting all together and adding some basic styles we get a custom node that prints text to the console:
完整代码示例 🏁
🌐 Full code example 🏁
要使你的自定义节点能够与其他节点连接，请查看Handles页面，了解如何添加源和目标句柄。
🌐 To enable your custom node to connect with other nodes, check out the Handles page to learn how to add source and target handles.