Реагировать - Создать сетку с помощью начальной загрузки

Question

Я пытаюсь создать веб-сайт и пытаюсь создать сетку. Так как я не очень хорошо разбираюсь в CSS, я использую бутстрап.

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

import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'

import React, { Component } from 'react'


export default class MoviesComponent extends Component {
    componentDidMount() {
        this.props.fetchShows()
    }
    render() {
        // console.log(this.props)
        let popular_movies = this.props.popular_movies
        // const items = popular_movies.length > 0 ? popular_movies.map((item)=> <div key={item.id}>item.title</div>) : "tt"   
        return (
            popular_movies.length > 0 ? 
            popular_movies.map((movie) => {
                return <Container className="container" key={movie.id}> 
                            <Row>
                            <Col><img src= {"http://image.tmdb.org/t/p/w185"+movie.poster_path} alt={movie.title} /></Col>
                            </Row>

                 </Container>
             })
             : <div>Loading...</div>

        )
    }
}

Answer 1

Вам нужно обернуть свои сопоставленные элементы в элемент HTML или фрагмент React.Что касается Row / Col, то это кажется правильным, однако настоятельно рекомендуем избегать библиотеки, так как она не поддерживается.Перейти на другие вкусы на основе Bootstrap.

return (
  popular_movies.length ?
    <Container className="container">
      <Row>
      {
        popular_movies.map((movie) => <Col xs={1} key={movie.id}>{movie.id}</Col>)
      }
      </Row>
    </Container>
    : <div>Loading...</div>
)