在重新渲染之前更新svg大小

时间:2020-04-20 11:12:24

标签: react-hooks

在重新渲染之前,我需要计算并更新svg大小。由于svg可以包含许多子级,因此我尝试通过避免两次重新渲染来做到这一点。

const Canvas: React.FunctionComponent<CanvasProps> = React.memo((props) => {

    const [width, setWidth] = useState(1000);
    const [height, setHeight] = useState(1000);

    const svgElement = useRef<SVGSVGElement>(null);

    useEffect(() => {
        if (svgElement.current) {
            const rect = svgElement.current.getBBox();

            setWidth(//some calculations using rect.width);
            setHeight(//some calculations using rect.height);
        }
    }, [props]);

    return (
        <svg {...props} width={width} height={height} ref={svgElement}/>
    );
}

不幸的是,以上代码会导致重新渲染。第一次更改属性。状态第二次改变。还有其他解决方案吗?

0 个答案:

没有答案