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

【问题标题】：Wrapping react-leaflet Map componet in <div> tag makes it disappear在 <div> 标签中包装 react-leaflet Map 组件使其消失
【发布时间】：2017-04-12 05:59:10
【问题描述】：

我正在尝试在我的<MapContainer/> 组件旁边添加一个兄弟<DeviceControls/> 组件。但是当我这样做时，OpenStreetMap / Leaflet 地图将从 DOM 中消失，页面上显示的只是<DeviceControls/>component 的内容。

这尤其令人困惑，因为我似乎在做与 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>
    );
}

【问题讨论】：

在 Chrome 反应检查器中，它还在 DOM 中吗？ ?
是的，我仍然可以在 React 开发工具中看到 imgur.com/a/ZoMVq

标签： javascript css reactjs leaflet react-leaflet

【解决方案1】：

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

【讨论】：