Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.04.2019, 20:41
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 100

delay в React .map()
Может кто-то знает как установить задержку между отрисовкой элементов через .map() ?

{
  array.map((item) => {
    <div>item.title</div>
    //установить задержку между отрисовкой дивов например в 2 сек
  })
}
Ответить с цитированием
  #2 (permalink)  
Старый 23.04.2019, 21:17
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 410

Ну как варик, https://reactjs.org/docs/code-splitting.html#reactlazy, там импорт сделать по таймауту... а вообще, это надо сделать через css
Ответить с цитированием
  #3 (permalink)  
Старый 23.04.2019, 21:27
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 410

только тут надо следить и за update'ом...
import React from 'react'

export default class App extends React.Component {
  state = {
    items: [
      { id: 1 },
      { id: 2 },
      { id: 3 },
    ],
    show: 1
  }

  componentDidMount() {
    const interval = setInterval(() => {
      this.state.show === this.state.items.length
        ?
        clearInterval(interval)
        :
        this.setState({ show: this.state.show + 1 })
    }, 1000)
  }

  render() {
    return this.state.items.slice(0, this.state.show).map(item => <div key={item.id}>{item.id}</div>)
  }
}

Последний раз редактировалось SuperZen, 23.04.2019 в 21:31.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно отрендерить данные на react с разрывом? s24344 Элементы интерфейса 0 28.01.2019 18:35
React Router - re-render компонента при смене url smegol Библиотеки/Тулкиты/Фреймворки 9 29.09.2018 23:58
node.js + react не принимает пост запрос korih Node.JS 0 15.04.2018 17:52
Ищу Senior Frontend (React, Angular), Москва, 140 - 180 000 gross, full time офис. Ekaterina Polyakova Работа 0 11.08.2016 19:07
как можно зациклить анимацию? imedia Элементы интерфейса 0 10.06.2015 21:07