X6

文档
API
图表示例
常见问题
更新日志
XFlow
所有产品
2.x

简介
快速上手
基础
进阶
插件
升级到 2.x 版本
开发者工具

React 节点

上一篇

群组

下一篇

Vue 节点

Resources

Galacea Effects

Umi-React 应用开发框架

Dumi-组件/文档研发工具

ahooks-React Hooks 库

社区

体验科技专栏

SEE Conf-蚂蚁体验科技大会

帮助

更多产品

Ant Design-企业级 UI 设计语言

语雀-知识创作与分享工具

Egg-企业级 Node 开发框架

Kitchen-Sketch 工具集

Galacean-互动图形解决方案

蚂蚁体验科技

© Copyright 2025 Ant Group Co., Ltd..备案号：京ICP备15032932号-38

Loading...

在本章节中你可以了解到

如何使用 React 组件来渲染节点内容
如何更新节点内容

渲染节点

我们提供了一个独立的包 @antv/x6-react-shape 来使用 React 渲染节点。

注意

需要注意的是，x6 的版本要和 x6-react-shape 的版本匹配，也就是两个包需要用同一个大版本。比如如果 X6 使用的是 2.x 版本，那么 x6-react-shape 也需要使用 2.x 版本。

注意

x6-react-shape 从 2.0.8 版本以后只支持 react18，如果你的项目是低于 react18 的版本，请把 x6-react-shape 的版本锁定在 2.0.8。

import { register } from '@antv/x6-react-shape'

const NodeComponent = () => {
  return (
    <div className="react-node">
      <Progress type="circle" percent={30} width={80} />
    </div>
  )
}

register({
  shape: 'custom-react-node',
  width: 100,
  height: 100,
  component: NodeComponent,
})

graph.addNode({
  shape: 'custom-react-node',
  x: 60,
  y: 100,
})

更新节点

与 HTML 一样，在注册节点的时候，提供一个 effect，字段，是当前节点的 prop 数组，当 effect 包含的 prop 有变动时，会重新渲染当前 React 组件。

register({
  shape: 'custom-react-node',
  width: 100,
  height: 100,
  effect: ['data'],
  component: NodeComponent,
})

const node = graph.addNode({
  shape: 'custom-react-node',
  x: 60,
  y: 100,
  data: {
    progress: 30,
  },
})

setInterval(() => {
  const { progress } = node.getData<{ progress: number }>()
  node.setData({
    progress: (progress + 10) % 100,
  })
}, 1000)

Portal 方式

上面的 React 组件渲染方式有一个缺点，因为内部是通过以下方式将组件渲染到节点的 DOM 中。

import { createRoot, Root } from 'react-dom/client'

const root = createRoot(container) // container 为节点容器
root.render(component)

可以看出，React 组件已经不处于正常的渲染文档树中。所以它内部无法获取外部 Context 内容。如果有这种应用场景，可以使用 Portal 模式来渲染 React 组件。