在<div>标记中包装react-leaflet映射组件使其消失

Question

我正在尝试在我的<MapContainer/>组件旁边添加一个同级<DeviceControls/>组件。但是当我这样做时，OpenStreetMap / Leaflet映射从DOM中消失，页面上显示的只有<DeviceControls/>组件的内容。

这特别令人困惑，因为我似乎正在做与来自PaulLeCam/react-leaflet (https://github.com/blob/70cd9f32bb6461df65b0d07b9810d5e9ddf459ad/example/components/index.js)的官方示例相同的事情。

const examples = (
  <div>
    <h1>React-Leaflet examples</h1>
    <h2>Popup with Marker</h2>
    <SimpleExample />
    <h2>Events</h2>
    <p>Click the map to show a marker at your detected location</p>
      ...
    <EventsExample />
    <h2>WMS tile layer</h2>
    <WMSTileLayerExample />
  </div>
)

其中有许多React组件和许多Map组件，并且它们都在页面上显示得很好。

当我尝试同样的事情时，谁能明白为什么它不起作用吗？例如，为什么在<div>中包装我的<MapContainer/>会使<MapCOntainer/>组件在我的代码中消失，而不是在官方示例代码中消失？

render() {
    return (
        <div>
            <MapContainer />    
            <DeviceControls />
        </div>
    );
}

Answer 1

之所以发生这种情况，是因为包装<MapContainer /> <DeviceControls />的<div>需要在其上设置高度。将其更改为<div style={{ height: '100%'>可以解决此问题。