Блог

Главная - Вопросы по программированию - Как передать элементы карусели react-bootstrap в функцию карты?

Как передать элементы карусели react-bootstrap в функцию карты?

#reactjs #react-bootstrap

Вопрос:

Проблема в том, что он делает три карусели, но предполагалось, что он сделает одну, со всеми тремя предметами внутри. Все остальное в порядке. В коде также используется react-bootstrap. Вот код:

Основной файл:

 import React from "react";
import testimonial from "./Testimonial";
import Entry from "./Entry";

function Reviews() {
  return testimonial.map(review => {
    return (
      <div>
        <Entry
          key={review.id}
          image={review.image}
          content={review.content}
          author={review.author}
        />
      </div>
    );
  });
}

export default Reviews;

Вот файл записи (тот, который отображается):

 import React from "react";
import { Carousel } from "react-bootstrap";

function Entry(props) {
    return(
        <div>
        <h1 className="reviews-h1">Reviews</h1>
        <Carousel>
          <Carousel.Item>
            <img
              className="testimonialImages d-block w-50"
              src={props.image}
              alt="First slide"
            />
            <Carousel.Caption>
              <h3>{props.author}</h3>
              <p>{props.content}</p>
            </Carousel.Caption>
          </Carousel.Item>
        </Carousel>
      </div>
    );
}

export default Entry;

А вот массив, в котором есть содержимое для отображения внутри него:

 const testimonial = [
    {
        id: 1,
        image: "an image url",
        content: "fake review",
        author: "john doe"

    },
    {
        id: 2,
        image: "an image url",
        content: "fake review",
        author: "john doe"
    },
    {
        id: 3,
        image: "an image url",
        content: "fake review",
        author: "john doe"
    }
]

export default testimonial;

Комментарии:

1. Вы должны создавать элементы карусели внутри одной и той же карусели с вашим циклом.

Ответ №1:

Вы можете поместить все в один файл и отобразить как так:

 import React from "react";
import { Carousel } from "react-bootstrap";

const reviews = [
  {
    id: 1,
    image: "an image url",
    content: "fake review",
    author: "john doe"

  },
  {
    id: 2,
    image: "an image url",
    content: "fake review",
    author: "jane doe"
  },
  {
    id: 3,
    image: "an image url",
    content: "fake review",
    author: "dane doe"
  }
]

function Entry() {
  return (
    <div>
      <h1 className="reviews-h1">Reviews</h1>
      <Carousel>
        {reviews.map(review => (
          <Carousel.Item key={review.id}>
            <img
              className="testimonialImages d-block w-50"
              src={review.image}
              alt={review.author}
            />
            <Carousel.Caption>
              <h3>{review.author}</h3>
              <p>{review.content}</p>
            </Carousel.Caption>
          </Carousel.Item>
        ))}
      </Carousel>
    </div>
  );
}

export default Entry;
Метки: