javascript - 在 标签中包裹 react-leaflet Map 组件使其消失

Question

我正在尝试添加兄弟 <DeviceControls/>我的 <MapContainer/> 旁边的组件成分。但是，当我这样做时，OpenStreetMap/Leaflet map 从 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%'>解决了这个问题。