我正在研究一个将React和Leaflet结合起来的项目,但我必须说我在语义方面遇到了一些困难。
由于大部分内容都是由Leaflet直接管理的,我不知道将Leaflet地图实例添加为React Component中的状态是否合理。
在使用Leaflet创建标记时也存在同样的问题,因为它没有返回任何内容,我没有任何可以渲染的东西。逻辑本身对我来说似乎很模糊。
这是我开始制作的。它正在工作,但我觉得我写错了代码并错过了这个概念。
/** @jsx React.DOM */
/* DOING ALL THE REQUIRE */
var Utils = require('../core/utils.js');
var Livemap = React.createClass({
uid: function() {
var uid = 0;
return function(){
return uid++;
};
},
getInitialState: function() {
return {
uid: this.uid()
}
},
componentDidMount: function() {
var map = L.map('map-' + this.state.uid, {
minZoom: 2,
maxZoom: 20,
layers: [L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'})],
attributionControl: false,
});
map.fitWorld();
return this.setState({
map: map
});
},
render: function() {
return (
<div className='map' id={'map-'+this.state.uid}></div>
);
}
});
(function(){
Utils.documentReady(function(){
React.render(
<Livemap />,
document.body
)
});
})();
所以我的问题是:
答案 0 :(得分:39)
getDOMNode
来访问组件的真实节点。 Leaflet的API支持字符串选择器或HTMLElement实例。map
不应该在state
上。仅存储影响React呈现DOM元素的state
中的数据。除了这两点之外,请正常使用Leaflet API,并根据需要将React组件的回调绑定到Leaflet映射。 React只是一个包装器。
import React from 'react';
import ReactDOM from 'react-dom';
class Livemap extends React.Component {
componentDidMount() {
var map = this.map = L.map(ReactDOM.findDOMNode(this), {
minZoom: 2,
maxZoom: 20,
layers: [
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'})
],
attributionControl: false,
});
map.on('click', this.onMapClick);
map.fitWorld();
}
componentWillUnmount() {
this.map.off('click', this.onMapClick);
this.map = null;
}
onMapClick = () => {
// Do some wonderful map things...
}
render() {
return (
<div className='map'></div>
);
}
}
答案 1 :(得分:20)
作为一个额外的,不那么详细的答案,PaulLeCam的反应传单组件似乎很受欢迎。尚未使用它但看起来很有希望:
https://github.com/PaulLeCam/react-leaflet
更新:它很扎实。尚未使用过许多功能,但代码库编写得很好,易于遵循和扩展,而且我使用的功能非常好用。