How to use the leaflet.DomUtil function in leaflet

createGeocoder: function(i, nWps, options) {
				var container = L.DomUtil.create('div', 'leaflet-routing-geocoder'),
					input = L.DomUtil.create('input', '', container),
					remove = options.addWaypoints ? L.DomUtil.create('span', 'leaflet-routing-remove-waypoint', container) : undefined;

				input.disabled = !options.addWaypoints;

				return {
					container: container,
					input: input,
					closeButton: remove
				};
			},
			geocoderPlaceholder: function(i, numberWaypoints, geocoderElement) {

stopDrawingLine: function() {
        if (!this._drawingDirection) {
            return;
        }
        this._map.off('mousemove', this.onMouseMoveFollowEndNode, this);
        var nodeIndex = this._drawingDirection === -1 ? 0 : this.getLatLngs().length - 1;
        this.spliceLatLngs(nodeIndex, 1);
        this.fire('nodeschanged');
        this._drawingDirection = 0;
        L.DomUtil.removeClass(this._map._container, 'leaflet-line-drawing');
        this._map.clickLocked = false;
        this._setupEndMarkers();
        this.fire('drawend');

    },

setExpanded: function() {
            L.DomUtil.removeClass(this._container, 'minimized');
        },

collapseBtn: function(itinerary) {
				var collapseBtn = L.DomUtil.create('span', itinerary.options.collapseBtnClass);
				L.DomEvent.on(collapseBtn, 'click', itinerary._toggle, itinerary);
				itinerary._container.insertBefore(collapseBtn, itinerary._container.firstChild);
			},
			collapseBtnClass: 'leaflet-routing-collapse-btn'

panoramaVisible: function() {
            if (L.DomUtil.hasClass(this._panoramaContainer, 'enabled')) {
                for (let provider of this.providers) {
                    if (L.DomUtil.hasClass(provider.container, 'enabled')) {
                        return provider;
                    }
                }
            }
            return false;
        },

onAdd: function(map) {
        this._map = map;
        this._canvas = L.DomUtil.create('canvas', 'leaflet-heatmap-layer');

        let size = this._map.getSize();
        this._canvas.width = size.x;
        this._canvas.height = size.y;

        let animated = this._map.options.zoomAnimation && L.Browser.any3d;
        L.DomUtil.addClass(this._canvas, 'leaflet-zoom-' + (animated ? 'animated' : 'hide'));


        map._panes.overlayPane.appendChild(this._canvas);

        map.on('moveend', this._reset, this);
        map.on('resize', this._resize, this);

        if (map.options.zoomAnimation && L.Browser.any3d) {
            map.on('zoomanim', this._animateZoom, this);

function applyFilters() {
        var activeFilters = [];
        layerNames.forEach(removeLayer);
        layerNames.forEach(removeShopLayer);
        layerNames.forEach(function (layer) {
            var checkbox = L.DomUtil.get(layer + '-filter');
            if (checkbox && checkbox.checked) {
                activeFilters.push(layer);
            }
        });
        activeFilters.forEach(setFilter);
        localStorage.setItem('filters', JSON.stringify(activeFilters));

        var shopCheckbox = L.DomUtil.get('shop-filter');
        if (shopCheckbox && shopCheckbox.checked) {
            activeFilters.forEach(setShopFilter);
        }
    }

_createCanvas: function (width, height) {
        //leaflet-layer 对应的css会自动设置position
        let canvas = L.DomUtil.create('canvas', 'graphicLayer  leaflet-layer leaflet-zoom-hide');
        canvas.oncontextmenu = L.Util.falseFn;
        canvas.width = width;
        canvas.height = height;
        canvas.style.width = width + "px";
        canvas.style.height = height + "px";
        return canvas;
    },
    _pixelToMeter: function (pixel) {

setOpacity(opacity) {
    this.options.opacity = opacity;
    if ( opacity < 1 ) {
      L.DomUtil.setOpacity(this._mutantContainer, opacity);
    }
  },

legend.onAdd = function(map) {
      let div = L.DomUtil.create("div", '');
      ReactDOM.render(jsx, div);
      return div;
    };