html 在我的场景中,如何让子组件填充父div容器?

axr492tv  于 2023-04-18  发布在  其他
关注(0)|答案(2)|浏览(157)

在我的场景中,我希望自定义组件(AntVX6Comp)填充父组件。
https://codesandbox.io/s/14m7hi
但我无法在组件中填充父项:

我的要求是填充父组件(或div容器)不要使用特殊的数字,因为容器的大小会改变。
在Graph API中,我只能给予具体的数字作为参数:

const graph = new Graph({
      container: containerRef.current || undefined,
      width: 200,
      height: 200,
      grid: true,
      async: true,
      background: {
        color: "#F2F7FA",
      },
    });

它不能像100%那样使用它。只有数字和未定义类型,我也试过使用undefined,但不走运。
那么如何让它填充React中的父组件呢?

8e2ybdfx

8e2ybdfx1#

如果你不能使用**100%**值作为宽度和高度,我建议使用javascript计算父容器的宽度和高度,并在容器元素上动态设置这些值

tyu7yeag

tyu7yeag2#

通过从containerRef获取scrollHeight/clientHeightscrollWidth/clientWidth,可以将尺寸设置为父级的尺寸。

width: containerRef.current?.scrollWidth || 200,
height: containerRef.current?.scrollHeight || 300,

||部分为默认长度。

相关问题