想要将来自 API 的图像显示为 3 列答案

【问题标题】：Want to display images from API into 3 columns想要将来自 API 的图像显示为 3 列
【发布时间】：2021-06-15 21:49:56
【问题描述】：

我正在从 API 中提取图像，并希望在浏览器中以 3 列精美地显示它们。但是在使用 Grid 的 react 语义 UI 和 CardColumns 的 react-boostrap 元素后，我有 1 列

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { Grid, Container } from 'semantic-ui-react';
import Button from 'react-bootstrap/Button';
import { CardColumns } from 'react-bootstrap';
import Card from 'react-bootstrap/Card';
import { fetchMealsStartAsync } from '../actions/getMeals';

const MealList = (props) => {
  const { cat } = props;
  const meals = useSelector((state) => state.meals.meals);

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchMealsStartAsync(cat));
  }, [cat]);

  return (
    <Container textalign="center" style={{ marginTop: 40 }}>
      <Grid>
        <Grid.Row>
          {
            meals && meals.map((meal) => (
              <CardColumns
                key={meal.strMeal}
                style={{ marginTop: 20 }}
                as={Link}
                to={{
                  pathname: `/ingredients/${meal.idMeal}`,
                  id: meal.idMeal,
                }}
              >
                <Card className="m-2 pb-1" style={{ width: '18rem' }}>
                  <Card.Img variant="top" src={meal.strMealThumb} />
                  <Card.Body>
                    <Card.Title>
                      {meal.strMeal}
                    </Card.Title>
                    <Button variant="primary">
                      Get Recipe
                    </Button>
                  </Card.Body>
                </Card>
              </CardColumns>
            ))
          }
        </Grid.Row>
      </Grid>
    </Container>
  );
};

MealList.propTypes = {
  cat: PropTypes.string,
};

MealList.defaultProps = {
  cat: '',
};

export default MealList;

【问题讨论】：

标签： css reactjs api bootstrap-4

【解决方案1】：

尝试这样做将您的三个（或更多）获取的项目放在父 div（例如容器）中，并使用 css 选择器给该父 div display: flex; flex-direction: row;

【讨论】：

【解决方案2】：

我将 <Grid.Row> 更改为 <Grid.Column> 并为其添加了引导程序，如下所示：<Grid.Column className="d-flex flex-wrap">

【讨论】：

【解决方案3】：

您可以简单地在浏览器中显示 3 列，方法是即

<Grid columns={3}>
      <Grid.Column>
        <Segment>Content</Segment>
      </Grid.Column>
      <Grid.Column>
        <Segment>Content</Segment>
      </Grid.Column>
      <Grid.Column>
        <Segment>Content</Segment>
      </Grid.Column>
      <Grid.Column>
        <Segment>Content</Segment>
      </Grid.Column>
      <Grid.Column>
        <Segment>Content</Segment>
      </Grid.Column>
      <Grid.Column>
        <Segment>Content</Segment>
      </Grid.Column>
    </Grid>

或者用这个替换整个代码

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { Grid, Container } from 'semantic-ui-react';
import Button from 'react-bootstrap/Button';
import { CardColumns } from 'react-bootstrap';
import Card from 'react-bootstrap/Card';
import { fetchMealsStartAsync } from '../actions/getMeals';

const MealList = (props) => {
  const { cat } = props;
  const meals = useSelector((state) => state.meals.meals);

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchMealsStartAsync(cat));
  }, [cat]);

  return (
    <Container textalign="center" style={{ marginTop: 40 }}>
      <Grid>
        <Grid.Row columns={3}>
          {
            meals && meals.map((meal) => (
             <Grid.Column>
              <CardColumns
                key={meal.strMeal}
                style={{ marginTop: 20 }}
                as={Link}
                to={{
                  pathname: `/ingredients/${meal.idMeal}`,
                  id: meal.idMeal,
                }}
              >
                <Card className="m-2 pb-1" style={{ width: '18rem' }}>
                  <Card.Img variant="top" src={meal.strMealThumb} />
                  <Card.Body>
                    <Card.Title>
                      {meal.strMeal}
                    </Card.Title>
                    <Button variant="primary">
                      Get Recipe
                    </Button>
                  </Card.Body>
                </Card>
              </CardColumns>
              </Grid.Column>
            ))
          }
        </Grid.Row>
      </Grid>
    </Container>
  );
};

MealList.propTypes = {
  cat: PropTypes.string,
};

MealList.defaultProps = {
  cat: '',
};

export default MealList;

【讨论】：