我也被这个问题卡住了。试试http://codrate.com/questions/how-can-trigger-the-window-resize-event-manually-in-javascript中的window.dispatchEvent（new Event（'resize '）
当通过拖动调整图表大小时，我调用了resizeHandler。

resizeHandler = () => {
    this.child.resizeHandler();
    window.dispatchEvent(new Event('resize'));
}

图表总是在调整大小时自动缩放，所以我基本上是在图表大小改变时触发窗口大小调整，所以对您来说，当您检测到页面布局改变时，可以触发窗口大小调整。

下面是一个完整的实现，它包含一个可调整大小的div，这样用户就可以通过调整父div的大小来调整绘图的大小;它使用的是ResizeObserver。这与您的问题略有不同，但我觉得它对其他搜索此问题的人会很有用。
这个精巧的图形位于一个定制的ResizableDiv组件中。

import _ from "lodash";
import PropTypes from "prop-types";
import React, {Component} from "react";
import ReactDOM from "react-dom";
import Plot from "react-plotly.js";

class ResizableDiv extends Component {
    constructor(props) {
        super(props);
        this.ref = React.createRef();
    }
    componentDidMount() {
        this.observer = new window.ResizeObserver(
            _.debounce(item => window.dispatchEvent(new Event("resize")), 1000)
        );
        this.observer.observe(this.ref.current);
    }
    componentWillUnmount() {
        this.observer.unobserve();
    }
    render() {
        return (
            <div style={{resize: "both", overflow: "hidden"}} ref={this.ref}>
                {this.props.children}
            </div>
        );
    }
}
ResizableDiv.propTypes = {
    children: PropTypes.element,
};

class PlotlyFigure extends Component {
    render() {
        const {data, layout} = this.props;
        return (
            <ResizableDiv>
                <Plot
                    data={data}
                    layout={layout}
                    useResizeHandler={true}
                    style={{width: "100%", height: "100%"}}
                />
            </ResizableDiv>
        );
    }
}
PlotlyFigure.propTypes = {
    data: PropTypes.array,
    layout: PropTypes.object,
};