如何将 react-bootstrap 轮播项目传递给 Map 函数？

Question

问题是它制作了三个旋转木马，但它本来应该制作一个，所有三个项目都在里面。其他一切都很好。该代码还使用了 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;

Answer 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;

如何将 react-bootstrap 轮播项目传递给 Map 函数？

How to pass react-bootstrap carousel items to a Map function?

reactjs

react-bootstrap