javascript - 将 react-leaflet Map 组件包装在标签使它消失

Question

我正在尝试<DeviceControls/>在我的组件旁边添加一个兄弟<MapContainer/>组件。但是当我这样做时，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 组件，它们都很好地显示在页面上。

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

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

Answer 1

发生这种情况是因为<div>包装<MapContainer /> <DeviceControls />需要在其上设置高度。改变它来<div style={{ height: '100%'>解决这个问题。