Как разделить компоненет React.js?

Question

[Merrii]

Делаю мой первый учебный проект на реакте - простой сайтик с галереей. Есть компонент, отображающий галерею. Хочу его правильно разделить, как минимум выделить <Item />. Подскажите, как его выделить, чтоб заработал?

import React from "react";
import PropTypes from "prop-types";

function imagesLoaded(parentNode) {
  const imgElements = [...parentNode.querySelectorAll("img")];
  for (let i = 0; i < imgElements.length; i += 1) {
    const img = imgElements[i];
    if (!img.complete) {
      return false;
    }
  }
  return true;
}

export class Gallery extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    };
  }

  handleImageChange = () => {
    this.setState({
      loading: !imagesLoaded(this.galleryElement)
    });
  };

  renderSpinner() {
    if (!this.state.loading) {
      return null;
    }
    return <span className="spinner" />;
  }


  render() {
    return (
      <div className="gallery container"
        ref={element => {
          this.galleryElement = element;
        }}
      >
        {this.renderSpinner()}
        <div className="images row">
          {this.props.imageUrls.map(imageUrl=>
            <div key={imageUrl.toString()}
            className="col-md-4 image-item backgrounded"
             onLoad={this.handleImageChange}
            onError={this.handleImageChange}
             style ={ { backgroundImage: "url("+imageUrl+")" } }>             
            </div>
          )}
        </div>
      </div>
    );
  }
}
Gallery.propTypes = {
  imageUrls: PropTypes.arrayOf(PropTypes.string).isRequired
};

Answer 1

[mr jeery]

{this.props.imageUrls.map(imageUrl=>
            <div key={imageUrl.toString()}
            className="col-md-4 image-item backgrounded"
             onLoad={this.handleImageChange}
            onError={this.handleImageChange}
             style ={ { backgroundImage: "url("+imageUrl+")" } }>             
            </div>
          )}

Вы здесь перебираете массив ImageUrls и на каждый его елемент создаете div куда помещаете значение элемента.
Соответственно

<div key={imageUrl.toString()}
            className="col-md-4 image-item backgrounded"
             onLoad={this.handleImageChange}
            onError={this.handleImageChange}
             style ={ { backgroundImage: "url("+imageUrl+")" } }>

Можно заменить на

<Image key={imageUrl.toString()}
             onLoad={this.handleImageChange}
            onError={this.handleImageChange}
             style ={ { backgroundImage: "url("+imageUrl+")" } }>

Создав класс Image