节点

¥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、位置和数据等基本属性，并提供选择、拖动和连接句柄的功能。有关所有可用自定义节点属性的完整参考，请参阅自定义节点属性。

¥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 reference on all available custom node props, see the Custom Node Props.

让我们通过创建一个名为 TextUpdaterNode 的自定义节点来深入研究一个示例。为此，我们添加了一个带有更改处理程序的简单输入字段。React Flow 有几个方便的预构建组件来简化创建自定义节点的过程。我们将使用 Handle 组件允许我们的自定义节点与其他节点连接。

¥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. React Flow has a few handy pre-built components to simplify the process of creating custom nodes. We will use the Handle component to allow our custom node to connect with other nodes.


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

添加节点类型

¥Adding the Node Type

你可以通过将新节点类型添加到 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
};
 
function Flow() {
  ...
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      nodeTypes={nodeTypes}
      ...
    />
  );
}

如果 nodeTypes 在组件内定义，则必须对其进行记忆。否则，React 会在每次渲染时创建一个新对象，这会导致性能问题和错误。以下是使用 useMemo 钩子记忆组件内部 nodeTypes 对象的方法：

¥If nodeTypes are defined inside a component, they must be memoized. Otherwise, React creates a new object on every render, which leads to performance issues and bugs. Here’s how you can memoize the nodeTypes object inside a component using the useMemo hook:


const nodeTypes = useMemo(() => ({ textUpdater: TextUpdaterNode }), []);
 
return <ReactFlow nodeTypes={nodeTypes} />;

定义新的节点类型后，你可以通过在节点定义中指定 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 },
  },
];

将所有内容放在一起并添加一些基本样式后，我们得到了一个将文本打印到控制台的自定义节点：

¥After putting all together and adding some basic styles we get a custom node that prints text to the console:


import { useState } from 'react';
import { ReactFlow } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import TextUpdaterNode from './TextUpdaterNode';
 
const rfStyle = {
  backgroundColor: '#B8CEFF',
};
 
const initialNodes = [
  {
    id: 'node-1',
    type: 'textUpdater',
    position: { x: 0, y: 0 },
    data: { value: 123 },
  },
];
// we define the nodeTypes outside of the component to prevent re-renderings
// you could also use useMemo inside the component
const nodeTypes = { textUpdater: TextUpdaterNode };
 
function Flow() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState([]);
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      nodeTypes={nodeTypes}
      fitView
      style={rfStyle}
    />
  );
}
 
export default Flow;

要使你的自定义节点能够与其他节点连接，请查看句柄页面，了解如何添加源句柄和目标句柄。

¥To enable your custom node to connect with other nodes, check out the Handles page to learn how to add source and target handles.