Estoy usando leaflet-contextmenu v1.4.0 en react-leaflet v3.2.1 . El problema con mi código a continuación es que showColor nunca se actualiza cuando cambia color .
Por ejemplo, si color es 'blue' en la inicialización de la aplicación, showColor sabrá que color es 'blue' . Si color cambia a 'red' , showColor nunca se actualiza; parece ser inmutable.
¿Cómo puedo actualizar las devoluciones de llamada dentro de los elementos del menú del menú contextual leaflet-contextmenu ?
const Component = ({ color: string }) => { var map = L.map('map', { contextmenu: true, contextmenuWidth: 140, contextmenuItems: [ { text: 'Show color', callback: showColor, }, ], }); function showColor() { alert(color); } };Creo que solo puedes instanciar el mapa una vez, no en cada renderizado. En su lugar, simplemente agregue el elemento del menú contextual en cada nueva representación.
// Only invoke L.map() once var map = L.map('map', { contextmenu: true, contextmenuWidth: 140, }); const Component = ({ color: string }) => { // update context menu items anytime color changes useEffect(() => { map.contextmenu.removeAllItems(); map.contextmenu.addItem({ text: 'Show color', callback: () => { alert(color) }, }); }, [color]); };