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不变。但是，刷新后，Pie会以正确的布局正确加载（对于小型设备还是大型设备，取决于情况）。只有热刷新失败。

关于如何进行热刷新的任何想法？

谢谢！

Answer 1

我同意Cozzani 您应该在状态中设置width / height，然后在addEventListener（）上添加width / height来调整大小，这意味着您应该更新状态然后组件将重新渲染，当组件重新渲染时，您的width / height将被更新。您可以看一下示例gist

react-chartjs-2响应式热刷新（饼图）

1 个答案: