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正确地从"Small devices“更改为"Big devices”，但react-chartjs-2中的Pie没有更改。但是，在刷新时，Pie会正确加载正确的布局(根据具体情况，适用于小型设备或大型设备)。只有热刷新失败。

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

谢谢!

Answer 1

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