反应和传单 [英] React and Leaflet

问题描述

我正在尝试在我的React App中使用Leaflet.我遇到了一个问题.Leaflet.js要求在启动地图时预先存在div组件.在渲染组件之前，React不会创建" div，因此传单会引发错误.无论出于何种原因，getDOMNode()和findDOMNode()都返回不是函数".

I'm trying to use Leaflet in my React App. I'm running into an issue. Leaflet.js requires the div component to pre-exist when initiating the map. React doesn't "create" the div until it renders the component, so leaflet is throwing an error. Both getDOMNode() and findDOMNode() return "not a function" for whatever reason.

代码:

import React from 'react';
import {render} from 'react-dom';
import L from 'leaflet';

...稍晚一点

export default class Mapbox extends React.Component {
  render() {
    var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

    return (

      <div id="map">
    <h1>hi</h1>
    </div>
    );

这将返回错误找不到地图容器".

This returns an error that "Map Container not Found".

谢谢.

推荐答案

您可以在

示例

这篇关于反应和传单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！