如何更新Motion.svg的大小？

Question

如何更新Motion.svg的大小？

我有一个常规的Div（在商店中的“ MAKESELEMENT”），其中包含一个Motion.svg元素，该元素又包含SVG G容器中包裹的一些RECT元素。 我需要更新我的SVG元素才能查看所有RECT元素。我将状态设置在回调钩中，但是即使我看到自己的状态变化，我的SVG元素的高度仍然是100。 我正在使用MOBX-LITE的UseObserver挂钩

export interface SVGContainerProps {
    store: myStore;
}

export default function SVGContainer(props: SVGContainerProps): ReactElement {
    const {
        store,
    } = props;

    const [height, setHeight] = useState<number>(100);

    const useSVGRef = useCallback((svg: SVGSVGElement) => {
        const bbox = svg.getBBox();

        console.log('height:', bbox.height);

        setHeight(bbox.height);
    }, [])

    return useObserver(() => (
        <motion.svg
            ref={useSVGRef}
            className={cssSvgContainer}
            dragConstraints={{ current: store.maskElement }}
            dragMomentum={false}
            drag={true}
            whileTap={{ cursor: 'grabbing' }}
            style={{ height: height}}
        >
            {store.items.map((item, index) => (
                <SVGRect
                    key={item.id}
                    item={item}
                    x={0}
                    y={index * 10}
                />
            ))}
        </motion.svg>
    ));
}

const cssSvgContainer = cx(
    cssPointerEventsAll,
    cssAbsolute,
    cssBottom(0),
    cssRight(0),
    cssBorder,
    cssBorderWidth1,
);