@ironmansl

Как прочитать (расшифровать) строки в этом React коде?

Здраствуйте! Изучаю react.js. Стараюсь кроме того что пишу свой код, изучать код других людей который мне попадается в интернете и на форуме. Но не все понятно, поэтому хочу вас спросить как правильно расшифровать некоторые строки кода, то есть не только что указанные строки делают, но и как они расшифровываются. Сам код реализует модальные изображения.
Прошу помочь прокомментировать закомментированные мною строки по аналогии с тем как я прокомментировал строку №1.

class App extends React.Component {
  state = {
    images: [
      'https://pixel.nymag.com/imgs/daily/intelligencer/2018/08/24/24-donald-trump-2.w700.h700.jpg',
      'https://bi.im-g.pl/im/15/a2/17/z24782357Q,Donald-Trump--prezydent-USA.jpg',
      'https://mobilitynews.pl/wp-content/uploads/2018/05/trump.jpg',
    ],
    openedImage: null,
  }

  open = e => {
    this.setState({
      openedImage: e.target.src,
    });
  }

  close = () => {
    this.setState({   openedImage: null,     });     /* Строка №1: Устанавливаю метод setState обьекту state, а в качестве аргумента метода пишу свойство обьекта state- openedImage с значением null.*/
  }

  render() {
    const { images, openedImage } = this.state;

    return (
      <div className="portfolio">
        <div className="portfolio-container">
          {images.map(n => (                                // Строка №2
            <div className="foto-container">
              <img
                className="foto-portfolio"
                src={n}                                       // Строка №3
                onClick={this.open}                 
              />
            </div>
          ))}
        </div>
        {openedImage && <div className="modal-portfolio">                          // Строка №4
          <span className="close" onClick={this.close}>&times;</span>         
          <img className="modal-content" src={openedImage} />                  // Строка №5
        </div>}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));
  • Вопрос задан
  • 80 просмотров
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы