Поскольку содержимое Map недоступно в componentDidMount времени (https://github.com/PaulLeCam/react-leaflet/issues/106#issuecomment-161594328) вы не можете получить границы FeatureGroup в этой точке, и из всех refs, которые вы назначаете, только Map ref будет доступно в this.refs.

Однако, согласно этому комментарию GitHub: https://github.com/PaulLeCam/react-leaflet/issues/106#issuecomment-366263225 вы можете указать функцию-обработчик FeatureGroup и onAdd:

<FeatureGroup ref="features" onAdd={this.onFeatureGroupAdd}>...

и затем вы можете использовать Map refs для доступа к leafletElement и вызвать fitBounds с границами цели входящего события, которая будет FeatureGroup:

  onFeatureGroupAdd = (e) => {
    this.refs.map.leafletElement.fitBounds(e.target.getBounds());
  }

Это затем приблизит карту к границам вашего FeatureGroup по желанию.

Обновлять

Я изменил свой компонент React, чтобы масштабирование и центр контролировались параметрами запроса. Проблема с приведенным выше решением заключалась в том, что если вы увеличили масштаб MarkerClusterGroup, щелкнув по нему, например, он обновил масштаб в URL-адресе, повторно отобразил карту и повторно вызвал onFeatureGroupAdd, тем самым отменив все преимущества кластера маркеров. .

Мне нужно было получить доступ к уровню масштабирования, необходимому для того, чтобы вновь нарисованный круг был хорошо ограничен, а затем обновить URL-адрес с правильным уровнем масштабирования и центром.

  onDrawCircle = (e) => {
    ...
    var targetZoom = this.refs.map.leafletElement.getBoundsZoom(e.layer.getBounds());
        // Call function to update url here:
        functionToUpdateUrl(targetZoom, e.layer.getBounds().getCenter());
    }
  }

Чтобы иметь возможность контролировать всю карту, я также вызываю functionToUpdateUrl в обработчиках событий onZoomEnd и onDragEnd, например:

  onChangeView = (e) => {
      functionToUpdateUrl(e.target._zoom, this.refs.map.leafletElement.getCenter());
  }

и один для обработки кластерных кликов:

  onClusterClick = (e) => {
     // This time we want the center of the layer, not the map?
     functionToUpdateUrl(e.target._zoom, (e.layer ? e.layer.getBounds().getCenter() : e.target.getBounds().getCenter()));
  }

Затем при рендеринге элемента Map передайте эти свойства:

  <Map
    center={center}
    ref='map'
    zoom={zoom}
    maxZoom={18}
    onZoomEnd={this.onChangeView}
    onDragEnd={this.onChangeView}
  >
  ....
  </Map>

И не забудьте дать всем MarkerClusterGroups их обратный вызов onClusterClick:

<MarkerClusterGroup onAdd={this.onMarkerGroupAdd} onClusterClick={this.onClusterClick}>

Вы пытались сделать getBounds в функции componentDidMount вместо componentWillMount? Если это не сработает, я бы предложил расширить компонент FeatureGroup и добавить функцию onLoaded в качестве реквизита и вызвать эту функцию в функции componentDidMount вашего расширенного компонента. И под расширением компонента FeatureGroup я на самом деле подразумеваю его копирование/вставку из здесь. (если вам небезразлично, почему вам нужно скопировать весь этот файл, проверьте эту тему )

Это не проверено, но ваш код, вероятно, будет выглядеть примерно так

import { FeatureGroup } from 'leaflet';

import { withLeaflet, Path } from 'react-leaflet';

class CustomFeatureGroup extends Path {
  createLeafletElement(prop) {
    const el = new FeatureGroup(this.getOptions(props));
    this.contextValue = {
      ...props.leaflet,
      layerContainer: el,
      popupContainer: el,
    };
    return el;
  }

  componentDidMount() {
    super.componentDidMount();
    this.setStyle(this.props);
    /*
     Here you can do your centering logic with an onLoad callback or just
     by using this.leafletElement.map or whatever
    */
    this.props.onLoaded();
  }
}

export default withLeaflet(CustomFeatureGroup)

Примечание. Если вы используете react-leaflet V1, это на самом деле намного проще, и я могу отредактировать этот ответ с помощью этого кода, если это необходимо.