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

Question

设置 Map 组件的宽度有效，但高度似乎只响应以像素为单位的绝对大小。

是否可以使 map 控件自动消耗父元素内的可用空间？

Answer 1

我能够创建一个组件，该组件传入 map 高度的组件状态值。我创建了一个辅助函数，可以调整高度以使其具有响应性。

...

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 (
      <div class="map-container" style={{ height: this.state.height }}>
        <Map>
          ...
        </Map>
      </div>
    )
  }
}