react整合antv x6

React 可以与 AntV X6 集成，让你可以在 React 应用程序中使用 X6 的图表组件。下面是一个简单的例子，演示如何将 AntV X6 集成到 React 中：

1. 安装依赖

首先，你需要安装以下依赖：

npm install @antv/x6 @antv/x6-react-shape @antv/x6-react @antv/x6-react-router

2. 创建一个 React 组件

创建一个新的 React 组件并导入必要的依赖：

import React from 'react';
import { Graph, Shape } from '@antv/x6';
import { ReactShape, ReactShapeAttrs, ReactShapeComponent } from '@antv/x6-react-shape';
import { X6Router, X6RouterAttrs, X6RouterComponent } from '@antv/x6-react-router';

const MyGraph = () => {
  const containerRef = React.useRef(null);
  
  React.useEffect(() => {
    const graph = new Graph({
      container: containerRef.current,
      width: 800,
      height: 600,
    });
    
    Shape.register('react', ReactShape, true);
    graph.addNode({
      shape: 'react',
      component: MyComponent,
      x: 100,
      y: 100,
    });
    
    graph.on('node:click', ({ node }) => {
      console.log('Node clicked:', node);
    });
    
    return () => {
      graph.dispose();
    };
  }, []);
  
  return <div ref={containerRef} />;
};

const MyComponent = (props: ReactShapeAttrs & X6RouterAttrs) => {
  const { x, y, width, height, label, onClick } = props;
  return (
    <div
      style={{ position: 'absolute', left: x, top: y, width, height, border: '1px solid black' }}
      onClick={onClick}
    >
      {label}
    </div>
  );
};

export default MyGraph;

在这个例子中，我们创建了一个 `MyGraph` 组件，它包含一个 X6 图表和一个 React 组件 `MyComponent`。在 `useEffect` 钩子中，我们创建了一个新的 Graph 实例，并向其添加一个 `ReactShape` 节点。该节点使用 `MyComponent` 作为组件，具有一些自定义属性（如 `x`, `y`, `width`, `height`, `label`, `onClick`），这些属性都可以在组件中使用。

3. 使用组件

在你的应用程序中，你可以使用 `MyGraph` 组件来渲染你的 X6 图表：

import React from 'react';
import MyGraph from './MyGraph';

const App = () => {
  return <MyGraph />;
};

export default App;

现在，你已经成功地将 AntV X6 集成到了 React 应用程序中。