Javascript 如何在SwiperSlide中接收有关当前卡的信息

我在SwiperSlide元素中有Card元素。我需要了解用户现在看到的是哪张卡，以及如何从该卡检索信息

MyStats.js

import React, { useState } from 'react';
import items from './allData';
import Menu from './Menu';
import Button from './Button';

const allCategories = ['All', ...new Set(items.map(item => item.category))];
console.log(allCategories);
function Mystats() {
  const [menuItem, setMenuItem] = useState(items);
  const [buttons, setButtons] = useState(allCategories);

var filter = (button) =>{

   if(button === 'All'){
   setMenuItem(items);
   return;
 }

 const filteredData = items.filter(item => item.category ===  button);
 setMenuItem(filteredData)
}
  return (
   <>
    <Button button={buttons} filter={filter} />
       <Menu menuItem={menuItem}/>
   </>
 );
}

 export default Mystats;

import React，{useState}来自“React”；
从“/allData”导入项目；
从“./菜单”导入菜单；
从“./按钮”导入按钮；
constAllCategories=['All'，…新集合（items.map（item=>item.category））；
console.log（所有类别）；
函数Mystats（）{
const[menuItem，setMenuItem]=使用状态（项）；
const[按钮，设置按钮]=使用状态（所有类别）；
变量过滤器=（按钮）=>{
如果（按钮=='All'）{
setMenuItem（项目）；
返回；
}
常量filteredData=items.filter（item=>item.category==按钮）；
setMenuItem（过滤器数据）
}
返回(
);
}
导出默认Mystats；

MyStat.js是放置我的卡的页面，它们将用户重定向到下一页。这个Javascript从另一个js文件中获取所有元素，并在菜单中生成一张新卡

Menu.js

import React from 'react'
import {Link} from 'react-router-dom';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import { makeStyles } from '@material-ui/core/styles';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';
const useStyles = makeStyles((theme) => ({
   root: {
     maxWidth: 300,
   }
 }));
 function Menu({menuItem}) {
     const classes = useStyles();
      return (
         <Swiper style={{display: 'flex', flexDirection: 'row'}}>
          <div className="item">
        {
          menuItem.map((item) =>{
            return (
              <SwiperSlide style={{display: 'flex',alignItems: 'center', flexDirection: 'row'}}>
                <Link to={{pathname:"tour"}}>
                  <Card className={classes.root} >
                    <CardHeader
                        title={item.name}
                      />
                      <CardMedia
                        image="/static/images/cards/paella.jpg"
                        title="Paella dish"
                      />
                      <CardContent>
                        {item.number}
                      </CardContent>
                    </Card>
                  </Link>
                </SwiperSlide>
              )
            })
        }
    </div>
  </Swiper>
)
 }

export default Menu;

从“React”导入React
从'react router dom'导入{Link}；
从“@material ui/core/Card”导入卡片；
从“@material ui/core/CardHeader”导入CardHeader；
从“@material ui/core/CardMedia”导入CardMedia；
从“@material ui/core/CardContent”导入CardContent；
从'@material ui/core/styles'导入{makeStyles}；
从“Swiper/react”导入{Swiper，SwiperSlide}；
导入“swiper/swiper bundle.css”；
const useStyles=makeStyles（（主题）=>({
根目录：{
最大宽度：300，
}
}));
功能菜单（{menuItem}）{
const classes=useStyles（）；
返回(
{
menuItem.map（（项目）=>{
返回(
{item.number}
)
})
}
)
}
导出默认菜单；

Menu.js为用户创建卡片并将其放入swiper