Вторник, 08 ноября 2022 03:59

Галерея изображений на реакте. ComponentWillMount и componentDidMount

Оцените материал
(3 голосов)

Судя по анализатору трафика гитхаба, несложная галерея на реакте (в данном случае lightgallery) вызвала некоторый интерес у начинающих программистов. Ну ок, в продолжение темы - два примера кода, иллюстрирующих способы получения путей всех находящихся в определенной директории изображений, с целью их использования в том или ином варианте слайдшоу веб-странички.

 

Dev banner 1

 

С использованием componentWillMount:

 

import React, { Component } from "react";
var listOfImages = [];

class App extends Component {
  importAll(r) {
    return r.keys().map(r);
  }
  componentWillMount() {
    listOfImages = this.importAll(
      require.context("../images/", false, /\.(png|jpe?g)$/)
    );
  }
  render() {
    return (
      <>
        {listOfImages.map((image, index) => (
          <a className="gallery-item" key={index} href={image}>
            <img src={image} className="thumb" alt="Some"></img>
          </a>
        ))}
      </>
    );
  }
}

export default App;

 

Однако, если беспокоит варнинг в консоли примерно такого содержания - componentWillMount is deprecated and will be removed in the next major version. Use componentDidMount instead. As a temporary workaround, you can rename to UNSAFE_componentWillMount - волей-неволей придется предпринять какие-то действия. К воркараунду обращаться не станем, попросту перепишем код, используя componentDidMount. Как, собственно, нам и предложено:

 

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { listOfImages: [] };
  }

  importAll(r) {
    return r.keys().map(r);
  }
  componentDidMount() {
    const list = this.importAll(
      require.context("../images/", false, /\.(png|jpe?g)$/)
    );
    this.setState({
      listOfImages: list,
    });
  }
  render() {
    return (
      <>
          {this.state.listOfImages.map((image, index) => (
            <a className="gallery-item" key={index} href={image}>
              <img src={image} className="thumb" alt="Some"></img>
            </a>
          ))}
      </>
    );
  }
}

export default App;

 

Увидеть на гитхабе.

 

Полную версию кода, как и всегда, можно глянуть (там же и ссылка на демку) в гитхабе автора, репозиторий носит название react-lightgallery. Удачи, happy coding.

Последнее изменениеСуббота, 11 марта 2023 15:39

Оставить комментарий

Добавьте ваш комментарий

Комментарии в блоге

  • Aleksej Yes. You can see it, I switched the temperature from C to F in the module on this page (Costa… 2024-10-01 21:43:42
    jWeather by ip. Погода по ip для Joomla!
  • Anne Is it possible to change temperature to F vs C? 2024-10-01 18:55:58
    jWeather by ip. Погода по ip для Joomla!
  • Aleksej Первое, что бросается в глаза: период времени, прошедший между тем, как автор комментария разбросал аналогичный текст по нескольким интернет-площадкам рунета,… 2024-07-02 14:10:05
    Tobeamerica эмансипе
  • Валерий Л. Предыдущий отзыв неактуален. Это было недоразумение, мы его уладили. Компания вернула мне деньги, никаких претензий к ней я не имею.… 2024-07-01 17:10:43
    Tobeamerica эмансипе
  • Евгения Кличко Спасибо. 2024-06-25 01:03:32
    Joomla cache. Problems and solutions

Заказать сайт

Веб-разработка. Заказать сайт

Вы можете заказать сайт-визитку, блог, корпоративный сайт, интернет-магазин или коммерческий web-портал.