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

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

Оцените материал
(1 Голосовать)

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

 

Dev banner 3

 

С использованием 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

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

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

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

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

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

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