Я пытаюсь сделать галерею фотографий маршрутом к другой галерее фотографий с помощью реакции. js - PullRequest
Новая
       10

Я пытаюсь сделать галерею фотографий маршрутом к другой галерее фотографий с помощью реакции. js

0 голосов
/ 28 февраля 2020

Я пытаюсь проложить галерею фотографий маршрутом к другой галерее фотографий с помощью реакции. Поэтому я хочу, чтобы ссылка открывала страницу со всеми описаниями и всеми фотографиями, необходимыми для создания этой галереи. Скорее всего, это будет похоже на страницу продукта телефона Samsung. Я могу получить доступ ко всем описаниям, но у меня возникают проблемы при рендеринге изображений для каждого конкретного c продукта.

Вот как я пытаюсь: 

import R1 from '../img/22RenwickSt/R1.jpg'
import R2 from '../img/22RenwickSt/R2.jpg'
import R3 from '../img/22RenwickSt/R3.jpg'

const initState = {
    posts : [
        {id: '1', title:'Fall in the stall', body: 'We Out Here', pics: R1,R2,R3 },
        {id: '2', title:'Call in the stall', body: 'We In Here', pics: R1,R2,R3 },
        {id: '3', title:'Tall in the stall', body: 'We Live Here', pics: R1,R2,R3 },

    ]
}

const rootReducer = (state = initState, action) => {
    return state;
}

export default rootReducer

, затем я отображаю его на этой странице: 

 import React, { Component } from 'react'
import { connect } from 'react-redux'


class Post extends Component {
    render() {
        console.log(this.props)
        const post = this.props.post ? (

            <div className="post">
              <h4 className="center">{this.props.post.title}</h4>
              <p>{this.props.post.body}</p>

              <img variant="top" src={this.props.post.pics}  alt="images" width="200px"  height="200px"/>
              <div className="center">
              </div>
            </div>
        ) : (
            <div className="center">Loading Post ....</div>
        )



        return (
            <div className="container">
               <h4>{ post }</h4>
            </div>
        )
    }
}

const mapStateToProps = (state, ownProps) => {
    let id = ownProps.match.params.post_id;
    return {
        post: state.posts.find(post => post.id === id)
    }
}



export default connect(mapStateToProps)(Post)

но показывает только первый пи c каждого массива. Я хочу циклически перебрать массив фотографий, чтобы показать все на странице продуктов.

пожалуйста, помогите

...