[question] react自定义Node的时候，foreignObject的外框如何调整与自定义节点设定样式宽高一致？

[liaodalin19903]

参考此教程

代码示例：
https://codesandbox.io/s/cy9f9t

使用自定义node的时候。

现象：edge围绕的是foreignObject，但是foreignObject的宽高与自己设定的Node的样式不一样。
导致使用上出现此现象：

自己的css设置为：

.react-node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px ;
  border: 1px solid #8f8f8f;
  border-radius: 6px;
}

react自定义Node的时候，这里的foreignObject的外框如何保持与自定义节点一致呢？

[liaodalin19903]

找到原因了：是因为initdata的时候，传递的height：40。修改后就好

import { useGraphStore } from '@antv/xflow'
import React, { useEffect, useCallback } from 'react'

export default function InitData() {
  
  const initData = useGraphStore((state) => state.initData)
  const setInitData = useCallback(() => {
    initData({
      nodes: [
        {
          id: '1',
          shape: 'custom-react-node',
          x: 32,
          y: 32,
          width: 100,
          height: 40,    // 这里的原因
          label: 'Hello',
          attrs: {
            body: {
              stroke: '#8f8f8f',
              strokeWidth: 1,
              fill: '#fff',
              rx: 6,
              ry: 6,
            },
          },
        },
        {
          id: '2',
          shape: 'circle',
          x: 160,
          y: 180,
          width: 60,
          height: 60,
          label: 'World',
          attrs: {
            body: {
              stroke: '#8f8f8f',
              strokeWidth: 1,
              fill: '#fff',
            },
          },
        },
      ],
      edges: [
        {
          source: '1',
          target: '2',
          attrs: {
            line: {
              stroke: '#8f8f8f',
              strokeWidth: 1,
            },
          },
        },
      ],
    })
  }, [initData])
  
  useEffect(() => {
    setInitData()
  }, [setInitData])

  return (
    null 
  )
}