React - 使用 bootstrap 创建网格

Question

我正在尝试创建一个网站并尝试创建一个网格。因为我不擅长 CSS，所以我使用 bootstrap。

但是我无法弄清楚如何从我拥有的图像数组创建网格，使其也具有反应性。

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 Fragment 中。就 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>
)

React - 使用 bootstrap 创建网格

React - Create grid using bootstrap

reactjs

react-bootstrap

bootstrap-4

react-bootstrap-table