我如何通過圖像對象數組將道具傳遞給樣式化組件和 map

Question

請問我如何使它工作輪播中的圖像我試圖 map 不渲染或顯示？ 如何通過圖像對象數組將道具傳遞給樣式組件和 map？ 我不想在我的輪播中創建圖像的 static 數據，這就是為什么我在圖像上創建了 map 的對象數組，但我不知道如何在樣式組件中設置 Z34D1F91FB2E514B8576FAB1A75A？

export const data = [
  {
    id: 1,
    imgUrl: "../../utils/images/slide-1.jpg",
  },
  {
    id: 2,
    imgUrl: "../../utils/images/slide-2.jpg",
  },
  {
    id: 3,
    imgUrl: "../../utils/images/slide-3.jpg",
  },
];

import { data } from "../data/data";

const BannerWrapper = styled.div`
  min-height: 500px;
  /* position: relative;
  right: 0;
  left: 0; */
  margin-top: -140px;
  /* bottom: 0; */
  z-index: 1;
  .caro-bg,
  .caro-bg-2,
  .caro-bg-1 {
    /* background: url(${(props) => props.imgUrl}); */
    background-blend-mode: multiply;
    @media (max-width: 768px) {**strong text**
      background-position: 55% 30%;
      object-fit: fill;
      text-align: center;
      height: 790px;
      padding-bottom: 80px;
    }
  }`enter code here`


 <Carousel effect="fade" autoplay>
        {data &&
          data.map((slide) => (
            <div
              className="caro-bg"
              key={slide.id}
              style={{ background: `${slide.imgUrl}` }}
            >
              <div className="banner-content">
                <div className="date-wrap">
                  {" "}
                  <div className="save">save</div>
                  <div className="the-date">the date</div>
                  <div className="date">
                    - 19<span className="pink-dot">.</span>12
                    <span className="pink-dot">.</span>21 -
                  </div>
                </div>
                <div>
                  <div className="banner-text medium light">
                    <h3>*** WE ARE GETTING MARRIED ***</h3>
                  </div>
                  <div className="heart-divider">
                    <span className="white-line"></span>
                    <HeartFilled
                      className="pink-dot"
                      style={{ fontSize: 18, zIndex: 20 }}
                    />
                    <HeartFilled style={{ fontSize: 20, marginLeft: -5 }} />
                    <span className="white-line"></span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </Carousel>
     

Answer 1

您可以使用此data.map((element)=>{ return element.imgUrl這將返回 object 鍵的特定值。您可以將其用作道具或在數據中創建<img src={imgUrl}/> .map 所以每次迭代時，它都會創建一個具有特定 url 的 img，如下所示：

   data.map((el)=>{
           return <img src={el.imgUrl}/>})

你可以創建一個組件來做到這一點。