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 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>
)

反应-使用引导程序创建网格

1 个答案: