在 react rnd 中调整 Google 图表的大小

Question

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

背景：

我正在尝试使用一个可调整大小的 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
      });
    }}
  >

在 react rnd 中调整 Google 图表的大小

Re-sizing Google chart in react rnd

reactjs

charts

widget

resizable