javascript - React 如何在 SwiperSlide 中接收有关当前卡片的信息

Question

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

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

菜单.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;

Menu.js 为用户创建卡片并将它们放入 swiper。

标签： javascriptnode.jsreactjsdom-eventsswiper