反応リーフレットマップコンポーネントを利用可能なスペースに合わせてサイズ変更します

Question

マップコンポーネントの幅を設定しますが、高さはピクセル単位の絶対サイズにしか反応しません。

マップコントロールが親要素内の空き領域を自動的に消費するようにすることはできますか？

Answer 1

マップの高さのコンポーネント状態値を渡すコンポーネントを作成することができました。私はすべての応答性を高めるために高さをリサイズするヘルパー関数を作成しました。

... 

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> 
    ) 
    } 
} 

Answer 2

は、私はその子の小道具としての幅/高さを渡しreact-container-dimensionscomponent、使用してこれを解決：...

<div className="div that can resize"" 
ContainerDimensions> 
<MyMapContainer/> 
</ContainerDimensions> 
</div> 

を

style.width = Math.floor(this.props.width);                                                                        
return (                                           
    <Map style={style}