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

Question

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

我想做 当点击目的地卡片时，应该会打开一个模式，其中包含所选目的地的详细信息。

我不知道如何将所选目的地详细信息发送到此组件<DestinationInfo />

我试过了

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”属性。确保将 props 中的“src”传递给 next/image 组件。收到：{"width":400,"height":400}

如何将 DestinationInCountry 中的选定项目发送到 DestinationInfo 这个组件

Answer 1

答案：

在 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;

Answer 2

你正在传递一个数组。

const [selected, setSlected] = useState('')

//Add an handle for button

const handler = (id) => {
   setSelected(id)
   setOpen(true)
}

<DestinationInfo selected ={selected}/>

Answer 3

DestinationInCountry 是一个数组。所以添加索引得到imageSrc

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