react 思维导图

React 思维导图应用

如果你想使用 React 创建一个思维导图应用，这里有一些关键步骤和资源。

1. 安装 React Flow

首先，确保你已经安装了 React Flow。如果还没有安装，可以通过以下命令安装：

npm install react-flow-renderer

2. 搭建 React 应用

通过运行以下命令，使用 vite 快速搭建一个 React 应用：

npm create vite@latest my-mind-map-app --template react
cd my-mind-map-app
npm install
npm run dev

3. 创建组件

在 src 文件夹中创建一个 components 文件夹，并在其中创建一个 node.jsx 文件。

4. 集成 React Flow

在 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} />
    </div>
  );
}

5. 渲染思维导图

在 App.jsx 文件中，替换以下代码以渲染 MindNode 组件：

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

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

export default App;

6. 设置根组件

在 src/main.jsx 文件中，添加以下代码以设置根组件：

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

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

7. 自定义节点外观

你可以通过修改 src/node.jsx 文件中的节点样式，根据节点的类型或属性来改变其外观。

8. 添加互动性

要允许用户与节点和边进行交互，例如建立连接和与节点进行交互，请使用 React Flow 提供的 onConnect 回调函数。

通过以上步骤，你应该能够创建一个基本的 React 思维导图应用。

参考资源

1. React Flow 官方文档
2. React Flow Github 仓库
3. React Flow 中文文档
4. React Flow 教程

通过这些资源，你可以进一步学习和了解如何使用 React Flow 创建更复杂的思维导图应用。