如何获取宽度 React 组件

Question

如何获取“g”的宽度和“text”的宽度并用于后续计算

const CustomizedAxisTick: React.FunctionComponent<ICustomTickProps> = ({x,y,payload,width,fill}) => {
        const firstLine = 12
        const secondLine = 24
        const dateTime = payload.value

    return (
        <g transform={`translate(${x},${y})`}>
            <text fontFamily="Roboto, sans-serif" transform={"rotate(-45)"} width={width} height="auto" textAnchor="middle" fontSize={12} fill={fill}>
            </text>
        </g>
    );
}

Answer 1

尝试对元素使用“ref”：https://reactjs.org/docs/refs-and-the-dom.html

从参考中您可以获得 clientHeight / offsetHeight 和 clientWidth / offsetWidth。

如何获取宽度 React 组件

How get width React Components

javascript

typescript

reactjs

mobx

recharts