Повторить экземпляр перед рендерингом

Question

В настоящее время я работаю над двумя классами React. Один содержит карту, а другой содержит кнопки для включения и выключения слоев. Я интегрирую propTypes, одна из них - это карта, чтобы ребенок мог размещать на ней маркеры.

componentDidMount() { 
    this.map = this.refs['map'].getMap() 
    // and other things 
} 

и визуализации() я передать ссылку:

<LayerButtons map={this.map}></LayerButtons> 

Вот карта в ref «с (ниже LayerButtons, если это имеет значение):

<Map height="480px" ref="map" zoom="13"/> 

Но this.props .map в LayerButtons - undefined. Я добавил записи журнала в класс с картой. Прямо перед оператором return в render() this.map равен undefined, как и ожидалось, и после присвоения в componentDidMount() определяется, также как и ожидалось. Поэтому я попытался переместить назначение в this.map в функцию render(), но перед рендером this.refs ['map'] не определен.

Как я могу инициализировать карту, чтобы она определялась при предоставлении LayerButtons?

Answer 1

Вы должны заставить компонент в засавить с помощью this.forceUpdate(), после того, как вы назначили карту в componentDidMount функции:

componentDidMount() { 
    this.map = this.refs['map'].getMap(); 
    this.forceUpdate(); 
    // and other things 
}