如何在反应中将参数从文件发送到另一个文件

Question

我正在建立一个 pokedex 网站，我有一些 pokemon 卡片，其中显示了 JSON 文件中的一些数据，当您单击其中一个时，您会看到一个模式视图，其中显示了更详细的数据. 所以在模态视图中我只想要我刚刚点击的卡片的详细数据。如果有人能帮忙，我不知道该怎么做，谢谢。

这是 Modal.tsx 我初始化模态视图的地方，这是我想从 Card.tsx 获取口袋妖怪名称的地方（参见下面），以便能够知道点击了哪张卡片：

import '../components/Modal.css';
import Data from '../pokemons.json';
import React from 'react';

export const Modal = ({showModal} : {showModal: boolean}) => {
    return (
        <>{showModal ? (
            <div className="modal-back">
                <div className="modal-container">
                    MODAL VIEW
                </div>
            </div>
        ): null}</>
    );
};

这是 Card.tsx 我处理卡片和调用模态视图的地方:

import Data from "../pokemons.json"
import '../components/Card.css'
import {FiThumbsUp} from "react-icons/fi"
import {useState} from 'react';
import {Modal} from './Modal';

function Card() {
    const [showModal, setShowModal] = useState(false);

    return(
        <div className="cards">
            {Data.map(card => {
                return(
                    <div className="card-box" onClick={() => setShowModal(true)}>
                        <img src={card.img} alt="" /> 
                        <div className="text">
                            <div className="first-line">
                                <p className="id">{card.id}</p>
                                <p>{card.name}</p>
                            </div>
                            <div className="type-container">
                                {card.type.map((type, index) => {
                                    return(
                                        <div className="type" key={index}>
                                            <p className={type}>{type}</p>
                                        </div>
                                    );
                                }) }
                            </div>
                        </div>
                        <div className="icon-circle">
                            <FiThumbsUp className="icon" color="#e5e5e5" size="18px"/>
                        </div>
                    </div>
                );
            }) }
            <Modal showModal={showModal}></Modal>
        </div>
    );
}

export default Card;

Answer 1

您可以在模态中将选定的卡片数据作为道具传递。您还需要更新道具类型，因为它只接受一个参数。

您的模态组件将如下所示：

interface ICard {
  name: string,
  ...
}

interface props { 
  showModal: boolean;
  card: ICard
}

export const Modal: FC<props> = ({showModal, card}) => {
    return (
        <>{showModal ? (
            <div className="modal-back">
                <div className="modal-container">
                    MODAL VIEW
                </div>
                <p>{card.name}</p>
            </div>
        ): null}</>
    );
};

您还需要更新卡片组件来传递道具。请确保您正在存储选定的卡数据。

<Modal showModal={showModal} card={card} />

如何在反应中将参数从文件发送到另一个文件

how to send a parameter from a file to another in react

javascript

typescript

reactjs

react-tsx