在 React rnd 中重新调整 Google 图表的大小

Question

我是反应新手，目前正在开发应用程序，

背景：

我正在尝试使用一个可调整大小的 rnd 组件，其中包含地理地图作为其内容。

问题：

尽管 rnd 组件调整大小工作正常，但 rnd 组件内的内容不会调整大小。

代码：

https://codesandbox.io/embed/15lo3mw93?fontsize=14

任何建议或提示都会有所帮助。

提前致谢。

Answer 1

你需要在调整大小时更新组件的状态，它会触发渲染并且地图应该得到正确的大小。

<Rnd
    style={style}
    default={{
      x: 0,
      y: 0,
      width: "" + this.state.mappanelwidth + "",
      height: "" + this.state.mappanelheight + ""
    }}
    onResize={(e, direction, ref, delta, position) => {
      this.setState({
        mappanelheight: ref.offsetHeight,
        mappanelwidth: ref.offsetWidth
      });
    }}
  >