时间戳

首页 > 解决方案 > React - 使用引导程序创建网格

reactjs - React - 使用引导程序创建网格

问题描述

我正在尝试创建一个网站并尝试创建一个网格。由于我不擅长 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>

        )
    }
}

标签： reactjsbootstrap-4react-bootstrapreact-bootstrap-table

解决方案

您需要将映射项包装在 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>
)

推荐阅读