如何从另一个功能组件react中获取数组中的选定项

Question

我正在做一个react - nextjs项目。

I want do当点击目的地卡片时，应该打开一个模态，其中包含所选目的地的详细信息。

我不知道如何将选定的目的地详细信息获取到该组件<DestinationInfo />

I tried with

DestinationCard.tsx

import { NextPage } from "next";
import styles from "./DestinationCard.module.scss";
import Image from "next/image";
import React, { useState } from "react";
import Button from "@material-ui/core/Button";
import DestinationInfo from '../destination-info/DestinationInfo';
const DestinationInCountry = [
{
imageSrc: "/images/offers/uk1.jpg",
postTitle: "Lorem Ipsum",
postDesc: "Lorem  Sit amet Lorem Ipsum Dolar Sit ametum Dolar Sit amet",
destination: "London",
price: "499",
link: "/",
},
{
imageSrc: "/images/offers/uk2.jpg",
postTitle: "Lorem Ipsum",
postDesc: "Lorem  Sit amet Lorem Ipsum Dolar Sit ametum Dolar Sit amet",
destination: "London",
price: "249",
link: "/",
},
];
const DestinationCard: NextPage = () => {
const [open, setOpen] = useState(false);
const openDestinationInfoCard = () =>{
setOpen(true);
}
return (
<>
{open ? (
<DestinationInfo  DestinationInCountry= {DestinationInCountry}/>
) : ( <div id="destinationCard" className={styles.main_wrapper}>
<div className={styles.destination_grid}>
{DestinationInCountry.map((item, index) => {
return (
<div key={index} className={styles.country_card}
onClick={() => openDestinationInfoCard()}
>
<div className={styles.post_wrapper}>
<div className={styles.post_title}>{item.postTitle}</div>
<div className={styles.post_desc}>{item.postDesc}</div>
<Button>
<a> Read more  </a>
</Button>
</div>
<div  className={styles.img_wrapper}>
<Image
src={item.imageSrc}
alt="world pinoy flights - destinations"
width={400}
height={400}
/>
</div>
</div>
);
})}
</div>
</div>)}
</>
);
}
export default DestinationCard;

DestinationInfo.tsx

import Image from "next/image";
import styles from './DestionationInfo.module.scss';
export interface DestinationPlacesProps {
DestinationInCountry;
}
const DestinationInfo: React.FC<DestinationPlacesProps> = (props) => {
return(
<>
<div className={styles.card_wrapper}>
<div>
<Image
src={props.DestinationInCountry.imageSrc}
alt="world pinoy flights - destinations"
width={400}
height={400}
/>
</div>
</div>
</>
)
}
export default DestinationInfo;

我得到这个错误。未处理的运行时错误错误:缺少所需的图像"src"财产。确保你通过了"在道具到next/image组件。收到:{"width" 400,"height": 400}

如何在DestinationInCountry中选择项目到DestinationInfo这个组件

Answer 1

DestinationInCountry是一个数组。添加索引获取imageSrc

src={props.DestinationInCountry[0].imageSrc}

Answer 2

您正在传递一个数组。

const [selected, setSlected] = useState('')
//Add an handle for button
const handler = (id) => {
setSelected(id)
setOpen(true)
}
<DestinationInfo selected ={selected}/>

Answer 3

答案:

在DestinationCard.tsx

<DestinationInfo DestinationInCountry= {DestinationInCountry} selected= {selected}/>

和

import Image from "next/image";
import styles from './DestionationInfo.module.scss';
export interface DestinationPlacesProps {
DestinationInCountry;
selected;
}
const DestinationInfo: React.FC<DestinationPlacesProps> = (props) => {
return(
<>
<div className={styles.card_wrapper}>
<div>
<Image
src={props.DestinationInCountry[props.selected].imageSrc}
alt="world pinoy flights - destinations"
width={400}
height={400}

/>
</div>
</div>
</>
)
}
export default DestinationInfo;