@aaic/mindmaptree 中文文档教程

Question

React-nodemap

使用 create-react-library

react-nodemap（我更喜欢称它为react-mindmap，但它被大量使用了？？？ ?) 是我从 Vue 手工转换而来的思维导图 React 组件，所以你可能会在从打包到执行的任何阶段遇到一些错误。 请随时发布您发现的任何问题，我会尽力解决。

原始 Vue 版本：[https://github.com/hellowuxin/mindmap]

????Demo

使用 Demo

????????New Updates(latest first)

1. can add your own watermark when export
2. added right click context menu and an option to
3. export whole mindmap to img or pdf

Install

npm install react-nodemap

或

yarn add react-nodemap

API

Property	Description	Type	Default
defaultValue	tree data(currently only accepts one obj in the array as the only root )	[]	[{ name: 'Root', children: [] }]
value	same as defaultValue, but has full control	[]	[{ name: 'Root', children: [] }]
depthLimit	add limit to tree depth	int	null
fields	specify the extra fields you pass into the data structure and also expecting them back when exported in onDataChange, by default see below node structure	[]	['id','createdAt']
onDataChange	function to update your data passed in value prop	func
style	good to specify whole canvas width and height, especially for export to pdf, the best is a 297:210 ratio landscape	{}	none
exportWatermark	show you own watermark img when export, you need at least a imgSrc a imgUrl or relative path and format e.g. 'JPEG', 'PNG', 'WEBP'(for jsPDF)	{}	{}

❗ Note

节点数据结构导出

{
  name:'',
  children:[],
  // generated in the tree constructor, will be replaced if you have your own fields array
  size:[], 
  color:'',
  depth: 0,
  nodeId: 0,
}

• onDataChange will only fire when you add, delete, move branch, change sibling positions and change text of nodes(when a node input loses focus)
• specify the fields in fields as an array like ['id','createdAt'] to keep data clean when exporting, but ????

! WARNING: avoid passing in fields with already taken names, see above node structure

Example

您甚至可以在添加任何道具之前使用组件 ，但一定要添加 onDataChange 函数来更新您传递给价值支柱

React Class Component

import React, { Component } from 'react'

import Nodemap from 'react-nodemap'
import 'react-nodemap/dist/index.css'

class Example extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: [
        {
          name: 'some text',
          children:[ 
            {
              name: 'some other text',
              children:[]
            }
          ]
        }
      ]
    }
  }

  onDataChange = (value) =>{
    this.setState({
      data: value
    })
  }

  render() {
    return 
    <Nodemap 
      defaultValue={this.state.data} 
      onDataChange={this.onDataChange}
      depthLimit={4}
      fields={['id','createdAt']}// output fields will be ['name', 'children','id','createdAt'], others will be omitted
    />
  }
}

或

React Hooks Component

import React, {useState, useEffect} from 'react'
import Nodemap from 'react-nodemap'

import 'react-nodemap/dist/index.css'

const App = () => {
  const [data,setData] = useState([
    {
      name: 'some text',
      children:[ 
        {
          name: 'some other text',
          children:[]
        }
      ]
    }
  ])

  return (
    <div>
      <Nodemap 
        value={data} 
        onDataChange={(value) => setData(value)}
        depthLimit={0}
        fields={['color','depth','id']}
      />
    </div>
  )
}

Known bugs（that currently no idea how to fix）

• [ ] change siblings position downward sometimes will not work or maybe crash

License

​​MIT © ysqsimon