如何在 React Flow 中隐藏水印
在使用 React Flow 构建基于节点的编辑器时，你可能会注意到画布右下角有一个默认的水印链接。虽然它看起来并不显眼，但在某些情况下，你可能希望将其隐藏，以使界面更加简洁。幸运的是，React Flow 提供了一个简单的解决方案来实现这一点。
问题背景
React Flow 是一个基于 React 的开源库，用于构建节点编辑器和交互式图表。它提供了丰富的功能，如拖拽节点、缩放、平移等。然而，免费版本的 React Flow 在画布右下角会显示一个水印链接，指向 React Flow 的官方网站。这个水印对于大多数用户来说是无害的，但在某些定制化的项目中，它可能会显得有些突兀。
解决方案
要隐藏 React Flow 的水印，你需要使用 proOptions 属性，并将其 hideAttribution 设置为 true。这是一个非常简单的解决方案，只需在你的 <ReactFlow> 组件中添加一行代码即可。
以下是一个示例代码：
import { ReactFlow } from '@xyflow/react';const nodes = [// 你的节点数据
];const edges = [// 你的边数据
];function MyFlow() {return (<ReactFlownodes={nodes}edges={edges}proOptions={{ hideAttribution: true }} // ← 隐藏水印/>);
}export default MyFlow;
总结
通过在 <ReactFlow> 组件中添加 proOptions={{ hideAttribution: true }}，你可以轻松地隐藏 React Flow 的水印。这个简单的配置让你的界面更加干净，同时也展示了 React Flow 的灵活性和可定制性。希望这个小技巧能帮助你在使用 React Flow 时获得更好的体验。