时间戳

首页 > 解决方案 > 如何在反应中将参数从文件发送到另一个文件

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

问题描述

我正在构建一个 pokedex 网站，我有一些口袋妖怪卡片，其中显示了一些来自 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;

标签： javascriptreactjstypescriptreact-tsx

解决方案

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

您的 Modal 组件将如下所示：

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}</>
    );
};

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

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

推荐阅读