React.js 和 Mapbox：使用 react.js 时 mapbox 地图无法正确渲染

Question

我正在学习同时使用 React 和 Mapbox，但我正在努力解决为什么我的 Mapbox 地图在通过 React 加载时无法正确呈现。当我正常加载它时（没有 React.js），没有问题，因为下面的代码有效并且地图正常显示：

<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css"/>

<div> id="map"></div>

    <script>                
    var map = L.mapbox.map('map', 'blabla.blabla').setView([lat, long], 9);
    </script>

但是，当我按照以下方式执行时，地图通常根本不会出现，或者即使出现，我也只能在 div 的左上角看到它的一部分。

<script src="path/to/react.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css"/>

<div id="react-content">
    <script src="path/to/react/content.js'></script>
</div>

//now inside react/content.js, there is a mapbox component inside an outer component. I'm leaving out the rest of the code to save space, and I believe that I am rendering the OuterComponent and the MapBoxMap component correctly inside that.

var MapBoxMap = React.createClass({
    componentDidMount: function() {
        L.mapbox.accessToken = this.props.accessToken;
        var map = L.mapbox.map(this.getDOMNode(), this.props.mapId)
            .setView([15, -105], 9);            
    },
    render: function() {
        return (
                <div id="map"></div>
        );
    }
});

进行缩放或打开 chrome 开发人员工具等操作似乎有时会使地图出现。我不知道发生了什么。当我尝试渲染地图时，组件是否未正确安装？我认为那是 componentDidMount 应该处理的？我真的很感激任何见解！另外，这张地图是在一些 Zurb Foundation 元素中渲染的，所以我不知道这是否会有所不同？

Answer 1

您缺少相关的 CSS？您始终需要设置元素的高度：

html, body, #map {
    height: 100%;
}

由于 React，我无法进行测试，但听起来地图无法从元素中获取正确的尺寸。如果您没有设置正确的 CSS 或元素具有 display: none;，通常会发生这种情况如果设置正确的 CSS 对您不起作用，您可以尝试使大小无效，以便地图将重置本身。 L.mapbox.Map 有一个 invalidateSize 方法可以调用，参见：

http://leafletjs.com/reference.html#map-invalidatesize

React.js 和 Mapbox：使用 react.js 时 mapbox 地图无法正确渲染

React.js and Mapbox: mapbox map not rendering properly when using react.js

javascript

leaflet

mapbox

reactjs