使用 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 。