javascript Map在react-bootstrap-carousel中不起作用

6gpjuf90 于 2023-04-28 发布在 Java

关注(0)|答案(2)|浏览(123)

我正在使用React bootstrap carousel。我想在里面使用Map。但它不起作用。有人能帮我吗

import React from "react";
import "../../styles/Banner.css";
import Carousel from "react-bootstrap/Carousel";

const data = [
  "https://rukminim1.flixcart.com/flap/1680/280/image/1defb861e409319b.jpg?q=50",
  " https://rukminim1.flixcart.com/flap/1680/280/image/685712c6cefb3c02.jpg?q=50",
  "https://rukminim1.flixcart.com/flap/1680/280/image/8d4150cc4f3f967d.jpg?q=50",
  "https://rukminim1.flixcart.com/flap/1680/280/image/685712c6cefb3c02.jpg?q=50",
];

const Banner = () => {
  return (
    <Carousel className="carasousel">
      <Carousel.Item>
        {data.map((imag, i) => {
          return (
            <>
              <img src={imag} alt="img" key={i} className="banner_img" />
            </>
          );
        })}
      </Carousel.Item>
    </Carousel>
  );
};

export default Banner;

它应该一次显示一个项目，但它是显示所有四个在一起。
另一个问题：我还想从旋转木马上取下下面的幻灯片指示器。有没有办法把它去掉。

JavaScript

来源：https://stackoverflow.com/questions/76107541/mapping-is-not-working-inside-react-bootstrap-carousel

2条答案

按热度按时间

8i9zcol21#

您可以尝试：

{data.map((imag, i) => (
      
          <img src={imag} alt="img" key={i} className="banner_img" />
      
    ))}

赞(0）回复(0）举报 2023-04-28

fnvucqvd2#

您可以将 map 函数移到Carousel.Item组件之外，并将 map 移到数据上，以创建Carousel.Items数组。每个Carousel.Item组件将仅渲染一个图像。
要删除下滑动指示器，可以将indicators prop 设置为false。
尝试以下操作：

import React from "react";
import "../../styles/Banner.css";
import Carousel from "react-bootstrap/Carousel";

const data = [
  "https://rukminim1.flixcart.com/flap/1680/280/image/1defb861e409319b.jpg?q=50",
  " https://rukminim1.flixcart.com/flap/1680/280/image/685712c6cefb3c02.jpg?q=50",
  "https://rukminim1.flixcart.com/flap/1680/280/image/8d4150cc4f3f967d.jpg?q=50",
  "https://rukminim1.flixcart.com/flap/1680/280/image/685712c6cefb3c02.jpg?q=50",
];

const Banner = () => {
  const carouselItems = data.map((imag, i) => (
      <Carousel.Item key={i}>
        <img src={imag} alt="img" className="banner_img" />
      </Carousel.Item>
  ));

  return (
    <Carousel className="carasousel" indicators={false}>
      {carouselItems}
    </Carousel>
  );
};

export default Banner;

赞(0）回复(0）举报 2023-04-28

我来回答

javascript Map在react-bootstrap-carousel中不起作用

2条答案

相关问题

热门标签

最新问答