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

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

当我尝试同样的事情时，有谁可以看到它为什么不起作用？即为什么将<MapContainer/>包裹在<div>中使<MapCOntainer/>组件似乎在我的代码中消失，而不是官方示例代码？

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

Answer 1

发生这种情况是因为<div>包裹了<MapContainer /> <DeviceControls />需要设置一个高度。将其更改为<div style={{ height: '100%'>可以解决此问题。

在<div>标签中包装react-leaflet Map组件使其消失

1 个答案: