Как отрендерить однотипные компоненты с задержкой между рендером?

Question

[Masterstvo]

Добрый день! Столкнулся с проблемой асинхронного рендера компонентов. Вообщем задача следующая. Нужно на google map добавлять маркеры по очереди, с анимацией, проходя по массиву с некими данными. На чистом js все решается обычным setTimeout. React, конечно, работает по другому!

кусок исходного кода:

...

       render() {
        return (
            <div className="container">
                <div className="map-box">
                    <Map google={this.props.google} { ...mapOptions }>

                        {
                            this.state.organization.map((item) => {
                                return (
                                    <Marker
                                        key = {item.id}
                                        position = {item.position}
                                        title = {'Кликните, что бы узнать больше'}
                                        onMouseover = {this.onMarkerOver}
                                        onMouseout = {this.onMarkerOut}
                                        icon = {this.getMarkerIcon(item.allPlaces,item.reservedPlaces)}
                                    />
                                );
                            })
                        }

                    </Map>
                </div>
           </div>
        );
    }

Прошу помочь, тех кто знает, как решить данную проблему. Спасибо!

Answer 1

[0xD34F]

А чем setTimeout не устраивает? Добавить переменную, отвечающую за количество отображаемых элементов, если её значение меньше общего количества элементов - сделать ей ++ с задержкой. Как-то так.

Comments

[Masterstvo]

Спасибо!