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

如何解决如何将 react-bootstrap carousel 项目传递给 Map 函数？

问题是它制作了三个转盘，但它应该制作一个，里面有所有三个项目。其他一切正常。该代码还使用了 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;

这是 Entry 文件（显示的那个）：

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,author: "john doe"
    },{
        id: 3,author: "john doe"
    }
]

export default testimonial;

解决方法

您可以将所有内容放在一个文件中并按如下方式映射：

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,author: "jane doe"
  },{
    id: 3,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;