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

【问题标题】：How to pass react-bootstrap carousel items to a Map function?如何将 react-bootstrap 轮播项目传递给 Map 函数？
【发布时间】：2021-04-21 09:57:34
【问题描述】：

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

【问题讨论】：

您应该在与循环相同的轮播中生成轮播项目。

标签： reactjs react-bootstrap

【解决方案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;

【讨论】：