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