react17中使用antv/x6

react17中使用antv/x6

react17后，官方推荐使用函数组件。

import React, { useEffect, useState} from 'react'
import { Graph } from '@antv/x6';function Myeditor() {// 初始，mounted生命周期时, container组件还没挂载。const [container,setcontainer] = useState<HTMLElement>(ateElement('div'));const data = {// 节点nodes: [{id: 'node1', // String，可选，节点的唯一标识x: 40,       // Number，必选，节点位置的 x 值y: 40,       // Number，必选，节点位置的 y 值width: 80,   // Number，可选，节点大小的 width 值height: 40,  // Number，可选，节点大小的 height 值label: 'hello', // String，节点标签},{id: 'node2', // String，节点的唯一标识x: 160,      // Number，必选，节点位置的 x 值y: 180,      // Number，必选，节点位置的 y 值width: 80,   // Number，可选，节点大小的 width 值height: 40,  // Number，可选，节点大小的 height 值label: 'world', // String，节点标签},],// 边edges: [{source: 'node1', // String，必须，起始节点 idtarget: 'node2', // String，必须，目标节点 id},],};// 获取container对象const refContainer=(container: HTMLDivElement)=>{setcontainer(container);}//官方文档写的是componentDidMount，因为react取消了三个生命周期函数，所以使用useEffectuseEffect(()=>{const graph=(new Graph({container: container,width: 800,height: 600,}));graph.fromJSON(data);}
)return (<div><div id="container"  ref={refContainer}></div></div>)
}
export default Myeditor;

详细可以看antvis/X6/react-demo