React-sheetlet: Как можно вызвать методы GeoJson, такие как resetStyle?

Question

Я следую примеру letsletjs interactive choropleth map, и я пытаюсь добавить взаимодействие с помощью метода resetStyle объекта GeoJson и метода fitBounds объекта Map. В листовке, эти методы вызываются с помощью ссылки на соответствующие объекты:

var map = L.map('map'); 

function zoomToFeature(e) { 
    map.fitBounds(e.target.getBounds()); 
} 

var geojson; 
// ... our listeners 
geojson = L.geoJson(...); 

function resetHighlight(e) { 
    geojson.resetStyle(e.target); 
} 

Как я могу получить доступ к этим методам в реакции-листовка? Методы не существуют в объектах, возвращаемых из пользовательского взаимодействия. Я также попытался экспортировать их из реакционной листовки, но это тоже не сработает.

Это мой jsfiddle.

Я знаю, что этот же вопрос был задан месяц назад, но решение, доступ this.refs.geojson.leafletElement.resetStyle(e.target), больше не работает, потому что refs не является собственностью e.target и this просто относится к e.target.

Answer 1

Одним из способов было бы прикрепить атрибут 'ref' к компоненту GeoJSON и передать ваш компонент вашим обработчикам событий.

JSFiddle: https://jsfiddle.net/thbh99nu/2/

<GeoJson data={statesData} 
        style={style} 
      onEachFeature={onEachFeature.bind(null, this)} 
      ref="geojson" /> 


// reset default style on mouseOut 
function resetHighlight (component, e) { 
    // Just to show the ref is there during the event, i'm not sure how to specifically use it with your library 
    console.log(component.refs.geojson); 
    // geojsonresetStyle(e.target); 
    // how to encapsulate GeoJson component/object? 
} 

// `component` is now the first argument, since it's passed through the Function.bind method, we'll need to pass it through here to the relevant handlers 
function onEachFeature (component, feature, layer) { 
    layer.on({ 
    mouseover: highlightFeature, 
    mouseout: resetHighlight.bind(null, component), 
    click: zoomToFeature 
    }); 
} 

Answer 2

Вы должны послать правильный лексическую область видимости для функций, и тогда вы сможете получить доступ к this.refs

, например:

this.highlightFeature.bind(this) 

, а затем оно будет

onEachFeature(feature, layer) { 
layer.on({ 
    mouseover: this.highlightFeature.bind(this), 
    mouseout: this.resetHighlight.bind(this), 
    click: this.clickToFeature.bind(this) 
});