React-chartJS-2 响应式热刷新(饼图)

Question

我目前正在制作一个饼图，我想根据窗口的大小更改布局(即从左到下更改图例的位置(。

function PieChart() {
const { width } = useWindowSize();
return (
<React.Fragment>
<Pie
data={data}
width={width < size.smallDevices ? 100 : "auto"}
legend={width < size.smallDevices ? legendOptsSmall : legendOptsLarge}
/>
<div>{width < size.smallDevices ? "Small devices" : "Big devices"}</div>
</React.Fragment>
);
}

在此示例中，width 返回窗口的宽度，当我调整窗口大小时，div 正确从"小型设备"更改为"大型设备"，但来自 react-chartjs-2 的饼图没有改变。 但是，刷新时，Pie 会以正确的布局正确加载(适用于小型设备或大型设备，具体取决于情况(。只有热刷新失败。

关于如何获得热刷新的任何想法？

谢谢！

Answer 1

我同意Cozzani您应该在您的状态中设置宽度/高度，然后在 addEventListener(( 上添加宽度/高度以调整大小，并且意味着当您应该更新您的状态时，组件将重新渲染，当组件重新渲染您的宽度/高度时，您的宽度/高度将被更新。你可以看看示例要点