react思维导图

React 思维导图应用概述 React 思维导图应用是一种基于 React 框架构建的工具，旨在帮助用户创建、可视化和组织思想、概念和信息。使用 React Flow 库，可以轻松实现交互式思维导图，支持节点的添加、连接和样式自定义。

主要功能

1. 节点管理

• 用户可以添加、删除和更新思维导图中的节点。
• 每个节点可以自定义标签和位置。

2. 连接管理

• 支持节点之间的连接，形成完整的思维导图结构。
• 可以通过拖拽操作实现节点的连接。

3. 交互性

• 提供缩略图（MiniMap）和控制面板（Controls），增强用户体验。
• 用户可以通过点击节点进行交互，查看详细信息或进行编辑。

4. 数据持久化

• 支持将思维导图的状态保存为 JSON 格式，以便后续加载和编辑。

实现步骤

以下是使用 React Flow 创建思维导图应用的基本步骤：

1. 项目设置

• 使用 Vite 创建新的 React 项目：

npm create vite@latest mind-mapping-app --template react
cd mind-mapping-app
npm install react-flow-renderer

2. 创建思维导图组件

• 在 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 = [];
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}
>
<Controls />
<MiniMap />
</ReactFlow>
<div>
<input
type="text"
onChange={(e) => setName(e.target.value)}
name="title"
/>
<button type="button" onClick={addNode}>
Add Node
</button>
</div>
</div>
);
}

3. 集成到主应用

• 在 App.jsx 中引入并渲染 MindNode 组件。

总结

通过以上步骤，您可以创建一个基本的 React 思维导图应用。可以根据需求进一步扩展功能，例如添加节点拖拽、节点编辑、样式自定义等，以提升用户体验和应用的实用性。