What is the good way to create custom GeoJSON component

Question

I Need help to create GeoJSON custom component from React-Leaflet

Write with React and React-Leaflet (last version both) The code works when write in the Map component, but I want to import/export it to split code

import React from 'react';
import { withLeaflet, GeoJSON } from 'react-leaflet'
import L from 'leaflet'


class CustomGesJSON extends GeoJSON {

    getStyle(feature) {
        // some code
    }

    pointToLayer(feature, latlng) {
        // some code
    }

    onEachFeature(feature, layer) {
        // some code
    }

    createLeafletElement(opts) {
        const CustomGesJSON = L.geoJSON.extend({

            onAdd: (map) => {
                this.getStyle = this.getStyle.bind(this);
                this.pointToLayer = this.pointToLayer.bind(this);
                this.onEachFeature = this.onEachFeature.bind(this);

                return this ;
            }
        });
        return new CustomGesJSON({ data: this.props.data });
    }


} 

function testlog(txt) {
    // some code
}

export default withLeaflet(CustomGesJSON);

I've got a error message "GeoJSON is not a constructor"

Function and method (not show here) works, I just need help to make a proper inheritance Other solution are welcome to

Thanks for your help

Answer 1

It is probable the "GeoJSON" object exported by "react-leaflet" is not an ES6 class, but the Leaflet L.GeoJSON "class".

You can use Leaflet own pre-ES6 class inheritance scheme, as described in the Leaflet class theory tutorial :

const MyCustomClass = GeoJSON.extend({
  options: {
    onEachFeature: myCustomDefaultFunction
    // etc.
  }
});
export default MyCustomClass;