当前位置:  开发笔记 > 编程语言 > 正文

使react-leaflet map组件自行调整大小以适合可用空间

如何解决《使react-leafletmap组件自行调整大小以适合可用空间》经验,为你挑选了1个好方法。

设置Map组件的宽度是可行的,但是高度似乎仅对像素的绝对大小作出响应。

是否可以使地图控件自动消耗父元素内部的可用空间?



1> Evan Siroky..:

我能够创建一个组件,该组件传递了针对地图高度的组件状态值。我创建了一个辅助函数,该函数将调整高度的大小以使其具有响应能力。

...

export default class MapContainer extends React.Component {

  updateDimensions() {
    const height = window.innerWidth >= 992 ? window.innerHeight : 400
    this.setState({ height: height })
  }

  componentWillMount() {
    this.updateDimensions()
  }

  componentDidMount() {
    window.addEventListener("resize", this.updateDimensions.bind(this))
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.updateDimensions.bind(this))
  }

  ...

  render() {
    ...
    return (
      
...
) } }

推荐阅读
臭小子
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有