javascript - 如何从另一个功能组件中获取数组中的选定项目
问题描述
我正在做一个 react-nextjs 项目。
我想做当单击目标卡时,应打开一个模式,其中包含该选定目标的详细信息。
我不知道如何将选定的目的地详细信息传递给该组件<DestinationInfo />
我试过了
目的地卡.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;
目的地信息.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”属性。确保将 props 中的“src”传递给next/image
组件。收到:{"width":400,"height":400}
如何将 DestinationInCountry 中的选定项目添加DestinationInfo
到此组件
解决方案
您正在传递一个数组。
const [selected, setSlected] = useState('')
//Add an handle for button
const handler = (id) => {
setSelected(id)
setOpen(true)
}
<DestinationInfo selected ={selected}/>
推荐阅读
- docker - 当我使用通过 NAT 的路由创建 GKE 集群时,由于权限问题,我无法提取 docker 映像
- java - weblogic.application.ModuleException:将war文件导出到Weblogic 12c R2时出现org.glassfish.jersey.server.model.ModelValidationException
- ionic-framework - 如何返回到 ionic 3 中的特定导航堆栈
- android - 在 pdf.js android webview 中打开本地文件(“文件”不支持错误)
- r - Trycatch in for 循环 - 继续下一个 r dataRetrieval
- java - CipherInputStream 挂起
- gcc - 构建 DRAMpower
- nuget - Microsoft.EntityFrameworkCore 的 System.IO.FileNotFoundException
- android - 当设备睡眠或屏幕关闭时,Jobscheduler 仍在运行?
- c# - 将 Where() 用于 Azure 移动服务的问题