我正在进行一个将React和Leaflet结合在一起的项目,但我必须说,我在语义方面遇到了一些困难。
由于大部分内容都是由传单直接管理的,我不知道在React组件中添加传单映射实例作为状态是否有意义。
当使用传单创建标记时也会遇到同样的问题,因为它不会返回任何内容,所以我实际上没有任何内容要渲染。在我看来,逻辑本身似乎很模糊
这是我开始做的。它很有效,但我觉得我写的代码不好,错过了这个概念。
/** @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
)
});
})();
所以我的问题是:
- 这个样品看起来合法吗
- 您将如何处理添加标记和管理其事件的逻辑
- 您不需要自己管理唯一性,即"UID"。相反,您可以使用
getDOMNode
来访问组件的实际节点。传单的API支持字符串选择器或HTMLElement实例 - 传单正在管理渲染,因此
map
不应驻留在state
上。仅将影响React对DOM元素的呈现的数据存储在state
中
除此之外,请正常使用传单API,并根据需要将React组件的回调绑定到传单映射。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>
);
}
}
作为一个不太详细的额外答案,PaulLeCam的react传单组件似乎很受欢迎。尚未使用,但看起来很有前景:
https://github.com/PaulLeCam/react-leaflet
更新:它很稳定。我还没有使用很多功能,但代码库写得很好,易于遵循和扩展,而且我使用的功能开箱即用。