如何在嵌套div视图中渲染Map

Question

我正在尝试研究如何在嵌套div中渲染地图。我有我的组件Home.js：

import React, {Component} from "react";

import {Map, TileLayer} from "react-leaflet"


class Home extends Component {
    constructor(  )
    {
        super();
        this.state = {
            latlng: {
                lat: 51.5074,
                lng: 0.1277,
            },
        }
    }

    render()
    {

        return (
            <div id="main-wrap">
                <div id="sidebar">
                    ...
                </div>
                <div id="content-wrap" style={{height:'700px'}}>
                    <Map
                        center={this.state.latlng}
                        length={4}
                        zoom={13}>
                        <TileLayer
                            attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                        />
                    </Map>
                </div>
            </div>
        );
    }
}

export default Home;

但是，如果我使用React开发人员工具，我可以看到页面中的组件，但这不会呈现任何内容。

如果我只有一个包含地图的div，那么它可以正常工作。 e.g。

import React, {Component} from "react";

import {Map, TileLayer} from "react-leaflet"


class Home extends Component {
    constructor()
    {
        super();
        this.state = {
            latlng: {
                lat: 51.5074,
                lng: 0.1277,
            },
        }
    }

    render()
    {

        return (
            <div id="main-wrap">

                <Map
                    center={this.state.latlng}
                    length={4}
                    zoom={13}>
                    <TileLayer
                        attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                </Map>
                
            </div>
        );
    }
}

export default Home;

但我非常想在页面上包含其他内容，因此需要多个div。

如果您能提供帮助，请提前致谢。 标记

Answer 1

问题是我没有设置这个CSS：

.leaflet-container {
  height: 100%;
}

现在一切正常！