📦 react-jsmind-usage — React 中使用 JSMind 的方法

ReactJsMind 集成概述 ReactJsMind 是一个 React 包装器，用于渲染交互式思维导图。它帮助开发人员快速将 npm 包集成到项目中，包括正确的导入、类型和配置。

何时使用 开发人员询问“如何安装和使用 react-jsmind” 开发人员报告“思维导图未显示” 开发人员需要 ref 方法（getData、addNode、screenShot） 开发人员对数据格式或类型感到困惑

安装 npm install @frank17008/react-jsmind # 或 yarn add @frank17008/react-jsmind 无需单独安装 jsmind，因为它是一个同伴依赖。

核心模式 - 基本集成 import React, { useRef } from 'react' import ReactJsMind from '@frank17008/react-jsmind' import type { JsMindRefValue, JsMindData } from '@frank17008/react-jsmind' import '@frank17008/react-jsmind/dist/esm/index.min.css' // REQUIRED for styling

const App = () => { const mindRef = useRef(null) // 正确的数据格式 - 必须包含 meta 和 format const mindData: JsMindData = { meta: { name: '思维导图', author: '您的名字', version: '1.0' }, format: 'node_tree', data: { id: 'root', topic: '中心主题', children: [ { id: '1', topic: '分支1' }, { id: '2', topic: '分支2' }, ], }, }

return (

export default App

快速参考 类型（从 @frank17008/react-jsmind 导入） 类型 用途 JsMindRefValue useRef 的 ref 类型 JsMindData 数据对象，包含 meta、format 和 data TreeNode 单个节点，包含 id、topic 和 children ArrayTreeNode 数组格式节点，包含 parentid

ref 方法 mindRef.current?.getData() // 获取当前数据 mindRef.current?.getSelectedNode() // 获取选中节点 mindRef.current?.screenShot() // 导出为 PNG mindRef.current?.expandAll() // 展开所有节点 mindRef.current?.addNode(parent, 'id', 'topic', {}, 'right') // 添加节点 mindRef.current?.removeNode(node) // 删除节点 mindRef.current?.setNodeColor(nodeId, '#ff0000', '#ffffff') // 设置颜色

数据格式 树格式（node_tree）：{ id, topic, children: [...] } 数组格式（node_array）：{ id, topic, parentid }，根节点包含 isroot

常见错误 错误 1：缺少 CSS 导入 // ❌ 错误 - 没有样式导入 import ReactJsMind from '@frank17008/react-jsmind' // ✅ 正确 - 导入样式 import ReactJsMind from '@frank17008/react-jsmind' import '@frank17008/react-jsmind/dist/esm/index.min.css'

错误 2：类型名称错误 // ❌ 错误 - 类型名称错误 const ref = useRef(null) // ✅ 正确 - 类型名称正确 const ref = useRef(null)

错误 3：缺少容器大小 // ❌ 错误 - 容器没有大小 // ✅ 正确 - 父容器必须有显式宽度和高度

错误 4：数据对象不完整 // ❌ 错误 - 直接传递 TreeNode // ✅ 正确 - 包装在 JsMindData 中，包含 meta 和 format

数据格式示例 树格式（推荐） const data: JsMindData = { meta: { name: '我的思维导图', version: '1.0' }, format: 'node_tree', data: { id: 'root', topic: '主主题', expanded: true, children: [ { id: '1', topic: '子主题 1', direction: 'left' }, { id: '2', topic: '子主题 2', direction: 'right', children: [{ id: '2-1', topic: '孙主题' }] }, ], }, }

数组格式 const data: JsMindData = { meta: { name: '我的思维导图' }, format: 'node_array', data: [ { id: 'root', topic: '主', parentid: null, isroot: true }, { id: '1', topic: '子 1', parentid: 'root' }, { id: '2', topic: '子 2', parentid: 'root' }, ], }

故障排除 “思维导图未显示” 检查父容器是否有显式宽度和高度 验证 CSS 是否导入：import '@frank17008/react-jsmind/dist/esm/index.min.css' 确保数据格式包含 meta 和 format 字段 “TypeScript 错误” 使用 JsMindRefValue 而不是 JsMindRef 导入类型：import type { JsMindRefValue, JsMindData } from '@frank17008/react-jsmind' “screenShot 不工作” 确保容器已经渲染 检查 dom-to-image 依赖是否安装