react-slick carousel 以某種方式添加到每個圖像的鏈接

Question

我正在從事 Gatsby 項目，但遇到了主頁橫幅問題。 使用可以正常工作的 react-slick，但是在每張圖片的頂部添加內容會導致問題。 為第二張圖片（“golflink”）設置鏈接會導致現在每張圖片都可以點擊並指向此 href。 有人可以幫助重寫，所以只有第二張圖片會導致活動頁面嗎？

鏈接到導航欄下方帶有橫幅的索引頁面https://zen-aryabhata-bd8020.netlify.app/

先感謝您。

import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick"
import { Link } from "gatsby";

import "../styles/bannerstyles.css"

import banner_image_1 from '../img/banner1.jpg'
import banner_image_2 from '../img/golferin.jpg'
import banner_image_3 from '../img/baby.jpg'
import golf_cup_logo from '../img/golf_cup_logo.png'


const photos = [
    {
    id: '1',
    url: banner_image_1,
    css_id: "banner-image-one",
    heading: 'unsere mission',
    description: 'Lebensrettende Hilfe für die Schwächsten',
    link: "/projekte",
    link_text: "mehr erfahren",
    },
    {
    id: '2',
    url: banner_image_2,
    css_id: "banner-image-two",
//  description: 'Dabei sein und (Golf-) spielend Gutes tun!',
    link_text: "mehr erfahren",
    link: "/events#golf-turnier",
    badge: golf_cup_logo,
    golflink: "/events#golf-turnier"
    },
    {
    id: '3',
    url: banner_image_3,
    css_id: "banner-image-three",
    heading: 'unsere projekte',
    description: 'Hilfe, die dort ankommt, wo sie am dringensten gebraucht wird!',
    link: "/projekte",
    link_text: "mehr erfahren"
    }
]


class HomepageBanner extends Component{
    render(){
    const settings = {
        dots: true,
        fade: true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 5000,
    }
    return (
        <div id="homepagebanner">
        <Slider {...settings}>
            {photos.map((photo) => {
            if (photo.id = 1) {
            return (
            <a href="/events#golf-turnier">
                <div id="homepagebanner-img-container">
                <img id="homepagebanner-img" width="100%" alt="homepagebanner-image" src={photo.url} />
                <div className="homepagebanner-text" id={photo.css_id}>
                    <div>
                <img src={photo.badge} width="100%" position="absolute" className="banner-badge"/>
            </div>
                <h1>{photo.heading}</h1>
                <p>{photo.description}</p>
                <a className="banner-link" href={photo.link}>{photo.link_text}</a>
                </div>
                </div>
                </a>
            )
            } else {
            return(
                <div id="homepagebanner-img-container">
                <img id="homepagebanner-img" width="100%" alt="homepagebanner-image" src={photo.url} />
                <div className="homepagebanner-text" id={photo.css_id}>
                <h1>{photo.heading}</h1>
                <p>{photo.description}</p>
                <a className="banner-link" href={photo.link}>{photo.link_text}</a>
                </div>
                </div>
            )
            }
        })}
        </Slider>
        </div>
    )
    }
}

export default HomepageBanner

Answer 1

您已經硬編碼了鏈接值<a href="/events#golf-turnier"> ，它包含在包括鏈接在內的所有內容中。

你的 if 語句也應該是 if (photo.id == 1) {

Answer 2

您在條件中分配一個值，而不是比較值：

(photo.id = 1)

應該：

(photo.id === 1)

即使==也可以，但為了更好地使用強制===

此外，您在每個渲染元素中都缺少key屬性。 該key有助於 React 識別哪些項目已更改、添加或刪除，並且它應該是一個唯一值，因此photo.id完全符合其定義。

您的最終代碼應如下所示：

return (
  <div id="homepagebanner">
    <Slider {...settings}>
      {photos.map((photo) => {
        if (photo.id === 1) {
          return (
            <a href="/events#golf-turnier" key={photo.id}>
              <div id="homepagebanner-img-container">
                <img id="homepagebanner-img" width="100%" alt="homepagebanner-image" src={photo.url} />
                <div className="homepagebanner-text" id={photo.css_id}>
                  <div>
                    <img src={photo.badge} width="100%" position="absolute" className="banner-badge" />
                  </div>
                  <h1>{photo.heading}</h1>
                  <p>{photo.description}</p>
                  <a className="banner-link" href={photo.link}>{photo.link_text}</a>
                </div>
              </div>
            </a>
          );
        } 
        return (
          <div id="homepagebanner-img-container" key={photo.id}>
            <img id="homepagebanner-img" width="100%" alt="homepagebanner-image" src={photo.url} />
            <div className="homepagebanner-text" id={photo.css_id}>
              <h1>{photo.heading}</h1>
              <p>{photo.description}</p>
              <a className="banner-link" href={photo.link}>{photo.link_text}</a>
            </div>
          </div>
        );
        
      })}
    </Slider>
  </div>
);

有關key的更多詳細信息： https://reactjs.org/docs/lists-and-keys.html