Я работаю над проектом, чтобы объединить React и Leaflet, но я должен сказать, что мне сложно с семантикой.
Поскольку большая часть материала управляется листом напрямую, я не знаю, было бы целесообразно добавить экземпляр карты Leaflet как состояние в компоненте React или нет.
Такая же проблема, когда дело доходит до создания маркеров с помощью 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="#" onclick="location.href='http://openstreetmap.org'; return false;">OpenStreetMap</a> contributors, <a href="#" onclick="location.href='http://creativecommons.org/licenses/by-sa/2.0/'; return false;">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
)
});
})();
Итак, мои вопросы:
- Этот пример кажется законным?
- Как вы подходите к логике добавления маркеров и управления их событиями?