ReactJsMind

React 版本的 jsMind 组件库，让开发者能够以声明式组件方式使用思维导图

特性

• 🎯 TypeScript 支持 - 完整的类型定义
• 🎨 灵活配置 - 支持 jsMind 所有配置选项
• 🔌 Ref 暴露 - 通过 ref 调用实例方法
• 🖼️ 截图导出 - 支持导出 PNG 图片（无水印）

安装

npm install @frank17008/react-jsmind

# 或使用 yarn
yarn add @frank17008/react-jsmind

快速开始

import React, { useRef, useState } from 'react'
import ReactJsMind from '@frank17008/react-jsmind'
import type { JSMindRefValue, JsMindData } from '@frank17008/react-jsmind'

const App = () => {
  const mindRef = useRef<JSMindRefValue | null>(null)
  const [editable, setEditable] = useState(true)

  // 获取思维导图数据
  const getData = () => {
    if (mindRef.current) {
      const data = mindRef.current.getData()
      console.log(data)
    }
  }

  // 节点数据
  const mindData: JsMindData = {
    meta: { name: '思维导图', author: 'Your Name', version: '0.8.5' },
    format: 'node_tree',
    data: {
      id: 'root',
      topic: '😊根节点',
      children: [
        {
          id: '1',
          topic: '子节点1',
          direction: 'left',
          expanded: true,
          'background-color': '#03BF8A',
          children: [
            { id: '2', topic: '子节点2' },
            { id: '3', topic: '子节点3' },
          ],
          data: { width: 100, type: 'rect' }, // 自定义业务数据
        },
      ],
    },
  }

  return (
    <div style={{ width: '100%', height: 800 }}>
      <div className="btns">
        <button onClick={getData}>获取数据</button>
        <button onClick={() => setEditable(!editable)}>
          {editable ? '关闭' : '开启'}编辑
        </button>
      </div>
      <ReactJsMind
        ref={mindRef}
        options={{ editable }}
        data={mindData}
        onClick={(node) => console.log('点击节点:', node)}
      />
    </div>
  )
}

export default App

API

Props

| 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | data | TreeNode \| ArrayTreeNode | 是 | 思维导图数据，支持树结构和数组结构 | | options | JsMindOptions | 否 | jsMind 配置选项 | | className | string | 否 | 自定义 CSS 类名 | | style | React.CSSProperties | 否 | 内联样式 | | onClick | (node: JsMindNode) => void | 否 | 节点点击事件 | | onMouseOver | (node: JsMindNode) => void | 否 | 节点鼠标悬停事件 | | onMouseOut | (node: JsMindNode) => void | 否 | 节点鼠标离开事件 | | onMouseLeave | (node: JsMindNode) => void | 否 | 节点鼠标离开容器事件 | | onContextMenu | (node: JsMindNode) => void | 否 | 节点右键事件 | | onKeyUp | (node: JsMindNode) => void | 否 | 节点键盘事件 | | onDblClick | (node: JsMindNode) => void | 否 | 节点双击事件 | | onExpand | (node: JsMindNode) => void | 否 | 节点展开事件 |

完整的 options 配置请参考 jsMind 配置文档

Ref 方法

通过 mindRef.current 调用以下方法：

| 方法 | 参数 | 说明 | |------|------|------| | getData() | - | 获取当前思维导图数据 | | getSelectedNode() | - | 获取当前选中的节点 | | expandAll() | - | 展开所有节点 | | addNode(parentNode, nodeId, topic, data, direction) | 父节点, 节点ID, 标题, 数据, 方向 | 添加新节点 | | removeNode(node) | 节点对象 | 删除节点 | | setNodeColor(nodeId, bgColor, fgColor) | 节点ID, 背景色, 前景色 | 设置节点颜色 | | setNodeFontStyle(nodeId, size, weight, style) | 节点ID, 字号, 字重, 字体风格 | 设置节点字体样式 | | screenShot() | - | 导出为 PNG 图片（无水印） | | getInstance() | - | 获取 jsMind 原生实例 |

更多实例方法请参考 jsMind 节点操作文档

数据格式

组件支持两种数据格式：

树结构 (node_tree)

{
  meta: { name: '...', author: '...', version: '...' },
  format: 'node_tree',
  data: {
    id: 'root',
    topic: '根节点',
    children: [
      { id: '1', topic: '子节点1', children: [...] },
    ]
  }
}

数组结构 (node_array)

{
  meta: { ... },
  format: 'node_array',
  data: [
    { id: 'root', topic: '根节点', parent: null },
    { id: '1', topic: '子节点1', parent: 'root' },
  ]
}

注意事项

1. 容器尺寸 - 组件会自动创建 jsmind_container 容器并充满父容器，请确保父容器已定义宽高

2. 获取原生实例 - 如需使用 jsMind 未暴露的方法，可通过 mindRef.current.getInstance() 获取原生实例

相关链接

• ReactJsMind在线Demo
• jsMind 文档
• jsMind 数据格式
• jsMind 配置选项
• jsMind 节点操作

License

MIT