react光滑的旋转木马以某种方式为每张图片添加链接

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