Skip to Content
教程故障排除迁移到 v11

迁移到 React Flow v11

🌐 Migrate to React Flow v11

你可以在这里找到旧版本 React Flow 的文档： v11 , v10 , v9 

在 v11 中发生了很多变化，但这一次我们尽量将破坏性更改保持在较小范围内。最大变化是新的包名称 reactflow 和新的仓库结构。React Flow 现在作为一个 monorepo 进行管理，并分成多个可以单独安装的包。除此之外，v11 中还引入了一些 API 更改和新 API。本指南详细说明了这些变化，并帮助你从 v10 迁移到 v11。

🌐 A lot changed in v11 but this time we’ve tried to keep the breaking changes small. The biggest change is the new package name reactflow and the new repo structure. React Flow is now managed as a monorepo and separated into multiple packages that can be installed separately. In addition to that, there are some API changes and new APIs introduced in v11. This guide explains the changes in detail and helps you to migrate from v10 to v11.

React Flow 11 仅支持 React 17 或更高版本

新功能

🌐 New Features

  • 更好的无障碍
    • 节点和边可通过键盘聚焦、选择、移动和删除。
    • aria- 所有元素的默认属性，并可通过 ariaLabel 选项进行控制
    • 键盘控制可以通过新的 disableKeyboardA11y 属性禁用
  • 更易选择的边缘 通过新的边缘选项：interactionWidth - 渲染不可见边缘，使互动更容易
  • 更好的平滑步进和步进边缘路由: https://twitter.com/reactflowdev/status/1567535405284614145 
  • 更好的边缘更新行为: https://twitter.com/reactflowdev/status/1564966917517021184 
  • 节点原点：新的 nodeOrigin 属性让你可以控制节点的原点。对布局很有用。
  • 新背景图案：BackgroundVariant.Cross 变体
  • useOnViewportChange 钩子 - 在组件内处理视口变化
  • use-on-selection-change 钩子 - 处理组件内的选择变化
  • useNodesInitialized 钩子 - 如果所有节点都已初始化并且节点数量大于 1，则返回 true
  • 可删除选项，适用于节点和边
  • 新事件处理程序：onPaneMouseEnter、onPaneMouseMove 和 onPaneMouseLeave
  • 边 pathOptions 用于 smoothstep 和 default 边
  • 更好的光标默认设置：在拖动节点或平移时，光标会变为抓取状态
  • 可移动窗格 使用中键鼠标
  • 当节点不可拖动时（draggable=false 或 nodesDraggable 为 false）悬停节点
    • 你可以通过在自定义节点的封装器中添加类名 nopan 来禁用此行为
  • <BaseEdge /> 组件，使构建自定义边缘更加容易
  • 可单独安装的软件包
    • @reactflow/core
    • @reactflow/background
    • @reactflow/controls
    • @reactflow/minimap

重大变化

🌐 Breaking Changes

1. 新的 npm 包名称

🌐 1. New npm package name

软件包 react-flow-renderer 已被重命名为 reactflow。

🌐 The package react-flow-renderer has been renamed to reactflow.

旧 API

🌐 Old API

// npm install react-flow-renderer
import ReactFlow from 'react-flow-renderer';

新 API

🌐 New API

// npm install reactflow
import { ReactFlow } from '@xyflow/react';

2. 导入 CSS 是强制性的

🌐 2. Importing CSS is mandatory

我们不再注入 CSS。如果不加载样式，React Flow 将无法工作！

🌐 We are not injecting CSS anymore. React Flow won’t work if you are not loading the styles!

// default styling
import '@xyflow/react/dist/style.css';
 
// or if you just want basic styles
import '@xyflow/react/dist/base.css';

2.1. 删除 nocss 入口点

🌐 2.1. Removal of the nocss entrypoint

这一变化也意味着不再有 react-flow-renderer/nocss 入口点。如果你使用过它，你需要按照上面提到的方式调整 CSS 入口点。

🌐 This change also means that there is no react-flow-renderer/nocss entry point anymore. If you used that, you need to adjust the CSS entry points as mentioned above.

3. defaultPosition 和 defaultZoom 已经合并为 defaultViewport

🌐 3. defaultPosition and defaultZoom have been merged to defaultViewport

旧 API

🌐 Old API

import ReactFlow from 'react-flow-renderer';
 
const Flow = () => {
  return <ReactFlow defaultPosition={[10, 15]} defaultZoom={5} />;
};
 
export default Flow;

新 API

🌐 New API

import { ReactFlow } from '@xyflow/react';
 
const defaultViewport: Viewport = { x: 10, y: 15, zoom: 5 };
 
const Flow = () => {
  return <ReactFlow defaultViewport={defaultViewport} />;
};
 
export default Flow;

4. 移除 getBezierEdgeCenter、getSimpleBezierEdgeCenter 和 getEdgeCenter

🌐 4. Removal of getBezierEdgeCenter, getSimpleBezierEdgeCenter and getEdgeCenter

在 v10 中，我们有 getBezierEdgeCenter、getSimpleBezierEdgeCenter 和 getEdgeCenter 用于获取某种类型边的中心。 在 v11 中，我们更改了用于创建路径的辅助函数，以便它也返回边的中心/标签位置。

🌐 In v10 we had getBezierEdgeCenter, getSimpleBezierEdgeCenter and getEdgeCenter for getting the center of a certain edge type. In v11 we changed the helper function for creating the path, so that it also returns the center / label position of an edge.

假设你想要获取贝塞尔边缘的路径和中心/标签位置：

🌐 Let’s say you want to get the path and the center / label position of a bezier edge:

旧 API

🌐 Old API

import { getBezierEdgeCenter, getBezierPath } from 'react-flow-renderer';
 
const path = getBezierPath(edgeParams);
const [centerX, centerY] = getBezierEdgeCenter(params);

新 API

🌐 New API

import { getBezierPath } from '@xyflow/react';
 
const [path, labelX, labelY] = getBezierPath(edgeParams);

我们不再称它为centerX和centerY，因为它实际上是标签位置，并不总是每种边类型的中心。

🌐 We avoid to call it centerX and centerY anymore, because it’s actually the label position and not always the center for every edge type.

5. 移除 onClickConnectStop 和 onConnectStop

🌐 5. Removal of onClickConnectStop and onConnectStop

旧 API

🌐 Old API

import ReactFlow from 'react-flow-renderer';
 
const Flow = () => {
  const onConnectStop = () => console.log('on connect stop');
 
  return (
    <ReactFlow
      defaultNodes={defaultNodes}
      defaultEdges={defaultEdges}
      onConnectStop={onConnectStop}
      onClickConnectStop={onConnectStop}
    />
  );
};
 
export default Flow;

新 API

🌐 New API

import { ReactFlow } from '@xyflow/react';
 
const Flow = () => {
  const onConnectEnd = () => console.log('on connect stop');
 
  return (
    <ReactFlow
      defaultNodes={defaultNodes}
      defaultEdges={defaultEdges}
      onConnectEnd={onConnectEnd}
      onClickConnectEnd={onConnectEnd}
    />
  );
};
 
export default Flow;

6. 在节点上平移

🌐 6. Pan over nodes

在以前的版本中，即使节点不可拖动，你也无法平移节点。在 v11 中，当 nodesDraggable=false 或节点选项 draggable=false 时，你可以平移节点。如果你想恢复旧的行为，可以将类名 nopan 添加到自定义节点的封装器上。

🌐 In the previous versions you couldn’t pan over nodes even if they were not draggable. In v11, you can pan over nodes when nodesDraggable=false or node option draggable=false. If you want the old behavior back, you can add the class name nopan to the wrappers of your custom nodes.

Last updated on
迁移到 v12迁移到 v10