Как я могу добавить элементы массива в DOM один за другим? - PullRequest
Новая
       8

Как я могу добавить элементы массива в DOM один за другим?

0 голосов
/ 14 ноября 2018

Я хочу добавить элементы из массива в DOM один за другим, а не в виде пакета, когда Array.map завершил свой цикл. Как я могу это сделать? 

<div className="gallery-content">
    <div className="content-to-display">
          {iconsToDisplay
             .map((icon, index) => 
                <GalleryItem 
                   key={index}
                   index={index} 
                   item={icon}
                   size={iconSize}
                   isSelected={index===selectedIconIndex}
                   onClick={this.setIconIndex}/>)}
    </div>                
</div>

Ответы [ 4 ]

0 голосов
/ 15 ноября 2018

Пробовал что-то с таймером. Пожалуйста, посмотрите, поможет ли это

enter image description here

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  constructor() {
    super();
    this.icons = [100, 200, 201, 400, 401, 404, 500, 502, 503, 504];
    this.state = {
      iconsToPlot: [],
      message: "Rendering images...",
      pendingCount: this.icons.length
    };

    let timerHandle = setInterval(() => {
      let imgNo = this.icons.pop();
      if (imgNo) {
        let pendingCount = this.icons.length;
        this.setState({
          iconsToPlot: [...this.state.iconsToPlot, imgNo],
          pendingCount: pendingCount
        });
      } else {
        clearInterval(timerHandle);
        this.setState({ message: "Timer stoped as all images are rendered." });
      }
    }, 3000);
  }

  render() {
    return (
      <div>
        <p>
          {this.state.message} Remaining {this.state.pendingCount} images{" "}
        </p>
        <ul>
          {this.state.iconsToPlot.map((key, index) => (
            <li key={index}>
              <img src={`https://http.cat/${key}`} width="150" />
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Играть здесь

0 голосов
/ 14 ноября 2018

Я думаю, что удобный способ сделать это - сначала визуализировать загрузку счетчика или заполнителя, а затем выполнить выборку данных hevy где-нибудь в componentDidMount .

Таким образом, вам не нужно будет делать задержки или вручную вызывать appendChild, потому что даже большое количество компонентов будет визуализировано быстро.

UPD: см., Например, jsfiddle . Сначала элементы галереи отображаются с начальным loading... сообщением, которое очень быстрое, затем я имитировал тяжелую загрузку внутри componentDidMount, который обновил состояние с помощью «загруженного» содержимого, и React успешно перерисовал их.

0 голосов
/ 14 ноября 2018

Альтернативный подход может быть следующим:

Вместо того, чтобы зацикливаться внутри JSX, вы можете сохранять индекс и элементы в состоянии и добавлять элемент в список непосредственно перед каждым рендерингом.Примерно так: 

state = {
  index: 0,
  galleryItems: []
}

componentDidMount() {
   // manually triggers the first component update
   this.setState({ state: this.state });
}

componentDidUpdate() {
   let galleryItems = this.state.galleryItems
   let index = this.state.index

   // loops until it reaches to the end of list
   if(index < iconsToDisplay.length - 1) {
      galleryItems.push(
         <GalleryItem 
            key={index}
            index={index} 
            item={icon}
            size={iconSize}
            isSelected={index===selectedIconIndex}
            onClick={this.setIconIndex}/>)})

      this.setState({
         index: index + 1,
         galleryItems: galleryItems
      })
   }
}

И затем вы можете получить этот список в цикле render().Примерно так: 

render() {    
   return(
     <div className="content-to-display">
       { this.state.galleryItems }
     </div>
   )
}

Таким образом, вы будете отображать их один за другим.

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

0 голосов
/ 14 ноября 2018

Может быть, что-то подобное может быть полезным: https://react -bootstrap.github.io / реагирующие-наложений / # порталы

Вы можете думать об этом как о декларативном appendChild () или jQuery's $ .Fn.appendTo (). Дочерние компоненты будут добавлены в указанный контейнер.

...