twitter-bootstrap - React 传单未正确渲染

Question

react-leaflet map 未正确渲染。

• map 在其父级边界之外渲染
• map 的某些图 block 丢失

将 map 与标准 react 组件一起使用时会出现此问题。

我的网站还使用react-bootstrap。正如我所读到的，这可能会对 react-leaflet 的渲染方式造成一些潜在的问题。

import React from 'react';
import ReactDOM from 'react-dom';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

const position = [37.335556, -122.009167];

class MapView extends React.Component {
    render() {
        return (
                  <div
                    style={{
                        height:"100%"
                    }}>
                    <Map center={position} zoom={13}>
                        <TileLayer
                          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        />
                        <Marker position={position}>
                          <Popup>
                            <span>A pretty CSS3 popup.<br/>Easily customizable.</span>
                          </Popup>
                        </Marker>
                      </Map>
                  </div>
        );
    }
}

module.exports = MapView;

Answer 1

首先，通过控制台安装:

> npm install leaflet 
> npm install react-leaflet

在index.js中导入一个位于node_modules中的css

//src/index.js
    import 'leaflet/dist/leaflet.css'

所以，现在只需输入边距和高度:

    ////src/App.js 
return (
            <MapContainer center={position} zoom={3} scrollWheelZoom={false} 
        style={{ height:"`enter code here`400px",backgroundColor:"red",marginTop:"80px", marginBottom:'90px'
            }} >
        </MapContainer>
        )

或

   return (
        <>
          <Map style={{ width: "100%", height: "100vh" }} center={center} zoom={13}>
            </Map>
</> )