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

使用 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 (
    "container">
      
    
```
);
}

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

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


import React from "react";
import MindNode from "./components/node";
 
function App() {
  return (
    "App">

);

}

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组件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 (
    "container">
      
        
          nodeColor={(n) => {
            if (n.type === "input") return "blue";
 
            return "#FFCC00";
          }}
        />
      
      
        
          type="text"
          onChange={(e) => setName(e.target.value)}
          name="title"
        />
        
          Add Node

React Flow是什么？

项目设置

创建组件

集成React Flow

自定义节点外观

添加互动性

保存和加载思维导图

界面设计的样式化

测试

结束