使用 React Flow 构建一个思维导图应用

思维导图是围绕共同主题或问题将思想、概念、信息或任务分组的视觉表示。思维导图应用是一种软件应用，允许您创建、可视化和组织您的思想、想法和信息作为思维导图。本文将向您展示如何实现自己的思维导图应用程序。

在我们开始之前，我想向您展示一下我们在本教程结束时将拥有的思维导图应用程序

React Flow是什么？

React Flow是一个开源工具包，用于在React应用程序中生成交互式图表、流程图和可视化。它提供了一种强大的方式来创建和管理复杂的可视化，如思维导图、网络图和组织结构图等。React Flow基于React构建，并使用现代Web技术提供统一的用户体验。

成千上万的用户使用React Flow，从个人开源开发者到像Stripe和Typeform这样的大公司。该库已被用于数据处理工具、聊天机器人构建器、机器学习、音乐合成器和其他应用程序中。

选择一个满足你需求的库可能会很困难，因为在不断发展的行业中有太多的选择。然而，使用React Flow、思维导图以及规划和设计你的项目可能会简化这个过程，节省你的时间和烦恼。

尽管市场上有众多竞争对手，但React Flow作为最出色的思维导图和流程框架之一，仍然在大型项目的开发过程中持续为用户带来好处。

在本教程中，您将学习如何使用React Flow创建一个基本的思维导图应用程序，该应用程序可用于头脑风暴、构思想法或可视化思维。

项目设置

让我们从搭建我们的React应用开始。通过运行以下命令在您选择的目录中搭建React：

npm create vite@latest mind-mapping-app --template react

cd mind-mapping-app

Vite是一个为主要框架提供的工具，可以让您从基本模板快速启动项目。这些模板由社区维护，并针对各种框架或集成其他工具。其中一个模板可以使用类似Degit的工具来搭建您的项目。

npx degit user/project my-project
cd mind-mapping-app

npm install
npm run dev

创建组件

要创建一个组件，请在您的思维导图应用的src文件夹中导航并创建一个组件（component）文件夹。接下来，在组件文件夹中创建一个新文件， node.jsx 。

集成React Flow

将React Flow集成到您的Vite React项目中，请按照以下步骤进行操作：

首先，请确保您已经安装了React Flow。如果还没有安装，请运行以下命令：

npm install react-flow-renderer

接下来，导航到 node.jsx 目录并粘贴以下代码：

import React from "react";
import ReactFlow from "reactflow";

import "reactflow/dist/style.css";

const initialNodes = [
  {
    id: "1",
    type: "input",
    data: { label: "Mind Map" },
    position: { x: 0, y: 0 },
  },
];

export default function MindNode() {
  return (
    <div id="container">
      <ReactFlow nodes={initialNodes }></ReactFlow>
    </div>
  );
}

我们导入了项目所需的重要依赖项。然后，我们定义了一个名为 initialNodes 的数组。该数组包含了一个起始节点配置，每个节点都有几个属性。 MindNode 功能性的React组件返回 JSX ，用于渲染思维导图节点。

从那里，导航到 App.jsx 在 src 目录/文件夹中，并替换以下代码以渲染函数 MindNode 。

import React from "react";
import MindNode from "./components/node";

function App() {
  return (
    <div className="App">
      <MindNode />
    </div>
  );
}

export default App;

最后，在这个阶段，导航到 src/main.jsx 并粘贴下面的代码：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

上面的代码设置并渲染了你的主要React组件App到HTML DOM中。从目前的代码中，你应该得到下面所示的输出：

自定义节点外观

您可以通过修改React Flow应用程序中节点的外观，根据其类型或属性构建具有不同样式和视觉属性的节点。现在导航到 src/node.jsx 并将以下代码添加到其中：

import React, { useState } from "react";
import ReactFlow, { MiniMap, useNodesState } from "reactflow";

import "reactflow/dist/style.css";

const initialNodes = [
  {
    id: "1",
    type: "input",
    data: { label: "Mind Map" },
    position: { x: 0, y: 0 },
  },
];


export default function MindNode() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [name, setName] = useState("");

  const addNode = () => {
    setNodes((e) =>
      e.concat({
        id: (e.length + 1).toString(),
        data: { label: `${name}` },
        position: {
          x: Math.random() * window.innerWidth,
          y: Math.random() * window.innerHeight,
        },
      })
    );
  };

  return (
    <div id="container">
      <ReactFlow nodes={nodes} onNodesChange={onNodesChange}>
        <MiniMap
          nodeColor={(n) => {
            if (n.type === "input") return "blue";

            return "#FFCC00";
          }}
        />
      </ReactFlow>
      <div>
        <input
          type="text"
          onChange={(e) => setName(e.target.value)}
          name="title"
        />
        <button type="button" onClick={addNode}>
          Add Node
        </button>
      </div>
    </div>
  );
}

上面的代码创建了一个基本的思维导图应用程序。用户可以向地图添加自定义标签，并根据节点的类型改变其外观。Reactflow库包含处理思维导图状态和交互性所需的组件和钩子。 miniMap 允许您从小的视角看到整个屏幕。

添加互动性

从上面的片段中我们可以看到，我们无法连接节点。允许用户与节点和边进行交互，比如建立连接和与节点进行交互，是为思维导图应用程序增加互动性的一种方式。请将以下代码复制并粘贴到您的 src/node.jsx 中。

import React, { useState, useCallback } from "react";
import ReactFlow, {
  MiniMap,
  Controls,
  useNodesState,
  useEdgesState,
  addEdge,
} from "reactflow";

import "reactflow/dist/style.css";

const initialNodes = [
  {
    id: "1",
    type: "input",
    data: { label: "Mind Map" },
    position: { x: 0, y: 0 },
  },
];
const initialEdges = [];
const onLoad = (reactFlowInstance) => {
  reactFlowInstance.fitView();
};

export default function MindNode() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const [name, setName] = useState("");

  const addNode = () => {
    setNodes((e) =>
      e.concat({
        id: (e.length + 1).toString(),
        data: { label: `${name}` },
        position: {
          x: Math.random() * window.innerWidth,
          y: Math.random() * window.innerHeight,
        },
      })
    );
  };

  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges]
  );

  return (
    <div id="container">
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        onLoad={onLoad}
      >
        <Controls />

        <MiniMap
          nodeColor={(n) => {
            if (n.type === "input") return "blue";

            return "#FFCC00";
          }}
        />
      </ReactFlow>
      <div>
        <input
          type="text"
          onChange={(e) => setName(e.target.value)}
          name="title"
        />
        <button type="button" onClick={addNode}>
          Add Node
        </button>
      </div>
    </div>
  );
}

上面的代码使用useEdgesState来管理边的状态，并使用useCallback定义onConnect来处理节点边（连接）的生成。之后，我们使用所需的边、事件处理程序和缩放和平移显示的控件来渲染一个ReactFlow组件。

保存和加载思维导图

在基于React Flow的应用中保存和加载思维导图是一个重要的功能，允许用户保存和恢复他们的工作。这个功能提高了您的应用的可用性和价值。

保存思维导图

保存思维导图时，您必须收集表示思维导图中节点和边的数据。这些信息应该被转换成可存储的格式，比如JSON。您可以利用元素的状态来捕捉思维导图的当前状态。导航到 src 文件夹并创建一个新文件 storage.jsx ，添加以下代码：

export const saveMindMap = (nodes, edges) => {
  const data = { nodes, edges };
  localStorage.setItem("mindMapData", JSON.stringify(data));
};

以上代码定义了 saveMindMap 函数，该函数将思维导图的数据，包括节点和边的信息，保存到浏览器的本地存储中。本地存储是一种在用户设备上存储少量数据的简单方法。

加载思维导图：

加载思维导图与保存相反。您获取保存的数据，反序列化它，然后使用加载的数据更新React Flow画布。要加载保存的思维导图，请将以下代码粘贴到您的 src/storage.jsx 中。

export const loadMindMap = () => {
  const data = localStorage.getItem("mindMapData");
  return data ? JSON.parse(data) : null;
};

上面的代码从本地存储中检索序列化数据，将其解析为对象并返回该对象。接下来，将以下函数导入到您的组件中，并使用它们来保存和加载思维导图：

import React, { useState, useCallback, useEffect } from "react";
import ReactFlow, {
  MiniMap,
  Controls,
  useNodesState,
  useEdgesState,
  addEdge,
  Background,
} from "reactflow";
import { saveMindMap, loadMindMap } from "./Storage";
import "reactflow/dist/style.css";

const initialNodes = [
  {
    id: "1",
    type: "input",
    data: { label: "Mind Map" },
    position: { x: 0, y: 0 },
    style: { border: "20px solid #9999" },
  },
];
const initialEdges = [];
const onLoad = (reactFlowInstance) => {
  reactFlowInstance.fitView();
};

export default function MindNode() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const [name, setName] = useState("");

  const addNode = () => {
    setNodes((e) =>
      e.concat({
        id: (e.length + 1).toString(),
        data: { label: `${name}` },
        position: {
          x: Math.random() * window.innerWidth,
          y: Math.random() * window.innerHeight,
        },
        style: { border: "10px solid #9999" },
      })
    );
  };

  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges]
  );
  const handleSaveClick = () => {
    saveMindMap(nodes, edges);
    console.log(nodes);
  };
  const handleLoadClick = () => {
    const loadedData = loadMindMap();
    if (loadedData) {
      setNodes(loadedData.nodes);
      setEdges(loadedData.edges);
      console.log(loadedData);
    }
  };

  const refreshPage = () => {
    window.location.reload();
  };
  // const nodeOrigin = [0.5, 0.5];
  const connectionLineStyle = {
    stroke: "#9999",
    strokeWidth: 3,
    
  };
  const defaultEdgeOptions = { style: connectionLineStyle, type: "mindmap" };

  return (
    <div id="container">
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        connectionLineStyle={connectionLineStyle}
        defaultEdgeOptions={defaultEdgeOptions}
        onConnect={onConnect}
        onLoad={onLoad}
      >
        <Controls />
        <Background variant="dots" gap={12} size={1} />
        <MiniMap
          nodeColor={(n) => {
            if (n.type === "input") return "blue";

            return "#FFCC00";
          }}
        />
      </ReactFlow>
      <div>
        <input
          type="text"
          onChange={(e) => setName(e.target.value)}
          name="title"
        />
        <button id="one" type="button" onClick={addNode}>
          Add Node
        </button>
      </div>
      <div>
        <button id="two" onClick={handleSaveClick}>
          Save Mind Map
        </button>
        <button id="three" onClick={handleLoadClick}>
          Load Mind Map
        </button>
        <button id="four" onClick={refreshPage}>
          Refresh
        </button>
      </div>
    </div>
  );
}

通过这些更改，您现在有一个用于保存当前思维导图数据的 handleSaveClick 函数，一个用于加载先前保存的思维导图数据的 handleLoadClick 函数，以及一个用于重新加载页面到其原始形式的 refreshPage 函数。

界面设计的样式化

我们的开发过程几乎完成了。让我们根据我们的特定需求来定制我们的设计。导航到 src/index.css 并替换以下代码：

body {
  margin: 0;
  background-color: #f8f8f8;
}
#container {
  height: 90vh;
  width: 100%;
}
input {
  border: 1px solid rgb(203, 186, 186);
  padding: 4px 8px;
  border-radius: 5px;
  font-weight: 700;
  background: transparent;
  height: 100%;
  color: #222;
}

input:focus {
  border: none;
  outline: none;
  background: rgba(255, 255, 255, 0.25);
  pointer-events: all;
}
button {
  padding: 6px 8px;
  border-radius: 5px;
  border: none;
  background-color: #008cba;
  color: white;
}
button:hover {
  background-color: rgb(69, 69, 229);
}
input[type="text"] {
  padding: 8px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.react-flow {
  border: 3px solid #9999;
  border-radius: 10px;
}
/* .react-flow_nodes {
  color: #a02828;
} */
#two {
  background-color: #4caf50;
  margin: 5px;
}
#two:hover {
  background-color: #63c266;
}
#three {
  background-color: #f44336;
  margin: 2px;
}
#three:hover {
  background-color: rgb(190, 68, 68);
}
#four {
  background-color: rgb(86, 86, 6);
}
#four:hover {
  background-color: rgb(113,

测试

我们将进行一项测试，以了解我们的ReactFlow Mind应用程序的工作原理。

请注意：您可以连接不同位置的节点，并且您还可以为每个节点指定一个期望的名称，以说明您的想法或项目。

结束

使用React Flow创建一个思维导图应用是一个有趣且多功能的项目，可以根据不同的用例进行调整，从头脑风暴会议到项目管理等等。在本指南中，我们已经涵盖了构建一个可工作的思维导图应用的重要步骤，例如设置开发环境，集成React Flow，修改节点外观，添加交互，并实现保存、加载和刷新功能。您可以根据需要添加更多功能和功能。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。