Блог

Может ли кто-нибудь помочь мне в оптимизации этого блока кода для реагирования на код с использованием функциональных компонентов с реквизитами?

Как вы можете видеть, это HTML-код.

 <div class="row"> 
  <div class="column">
    <img src="/category/1.jpg">
    <img src="/category/2.jpg">
    <img src="/category/3.jpg">
    <img src="/category/4.jpg">
  </div>
  <div class="column">
    <img src="/category/5.jpg">
    <img src="/category/6.jpg">
    <img src="/category/7.jpg">
    <img src="/category/8.jpg">
  </div>  
  <div class="column">
    <img src="/category/9.jpg">
    <img src="/category10.jpg">
    <img src="/category11.jpg">
    <img src="/category12.jpg">
  </div>
  <div class="column">
    <img src="/category13.jpg">
    <img src="/category14.jpg">
    <img src="/category15.jpg">
    <img src="/category16.jpg">
  </div>
</div>
 

Я пытался написать что-то подобное, но это не дает ожидаемого результата.
Кто-нибудь может мне помочь, пожалуйста?

Это мой код реакции.

 const Category1 = () => {
    return (
        <ImageGallery />
    );
}

const imagesInfo = [
    { index: '1', imagePath: 'category/category1/1.jpg' },
    { index: '2', imagePath: 'category/category1/2.jpg' },
    { index: '3', imagePath: 'category/category1/3.jpg' },
    { index: '4', imagePath: 'category/category1/4.jpg' },
    { index: '5', imagePath: 'category/category1/5.jpg' },
    { index: '6', imagePath: 'category/category1/6.jpg' },
    { index: '7', imagePath: 'category/category1/7.jpg' },
    { index: '8', imagePath: 'category/category1/8.jpg' },
    { index: '9', imagePath: 'category/category1/9.jpg' },
    { index: '10', imagePath: 'category/category1/10.jpg' },
    { index: '11', imagePath: 'category/category1/11.jpg' },
    { index: '12', imagePath: 'category/category1/12.jpg' },
    { index: '13', imagePath: 'category/category1/13.jpg' },
    { index: '14', imagePath: 'category/category1/14.jpg' },
    { index: '15', imagePath: 'category/category1/15.jpg' },
    { index: '16', imagePath: 'category/category1/16.jpg' },
];

const ImageGallery = () => {
    return (
        <div className="category1">
            {imagesInfo.map(object => (
                <ImagesRow
                    key={object.index}
                    imagePath={object.imagePath} />
            ))}
        </div>
    );
}

const ImagesRow = (props) => {
    return (
        <div className="row">
            <ImagesColumn {...props} />
        </div>
    );
}

const ImagesColumn = (props) => {
    return (
        <div className="column">
            <img src={imagesPath   props.imagePath} alt="asdf" />
        </div>
    )
}

export default Category1;
 

Заранее спасибо за любую помощь