当我们点击数据时如何显示和发送相同的数据到另一个页面

Posted 2023-02-22

【中文标题】当我们点击数据时如何显示和发送相同的数据到另一个页面

【英文标题】：How to display and send same data to another page when we click the data

【发布时间】：2021-11-13 00:12:42

【问题描述】：

我有Card组件来显示来自Axios的数据，然后我想在另一个页面中单击Card时显示数据。我该怎么办？

Sidebar.js

import React,  useState, useEffect  from 'react';
import axios from 'axios';
import Card from './Card';

const SideBar = () => 
  const [menuItem, setMenuItem] = useState([]);

  const url = 'https://blalalalalalla';
  const [categories, setCategories] = useState([]);
  useEffect(() => 
    getIconApp('All Categories');
    getCategory();
  , []);

  const getIconApp = (type) => 
    axios
      .get(`$url`)
      .then((res) => 
      
        const allIconApp = res.data;
        if (type === 'All Categories') 
          setMenuItem(allIconApp);
        
         else 
          const filteredData = allIconApp.filter(
            (app) => app.category === type
          );
          setMenuItem(filteredData);
        
      )
      .catch(function (error) 
    
        console.log(error);
      );
  ;

  return (
    <div className="flex">
      <div className="container">  
          <Card menuItem=menuItem />
      </div>
    </div>
  );
;

export default SideBar;

卡片.js

import React from 'react';
import  Link  from 'react-router-dom';
const Card = ( menuItem ) => 

  return (
    <>
      <div className="flex flex-wrap">
     
          <div className="grid grid-cols-3 md:grid-cols-3 grid-rows-2 md:grid-rows-2 gap-x-9 md:gap-x-6  ">
            menuItem.map((app, index2) => (
              <div
                className="flex text-sm my-4 pt-4 rounded-md relative "
                style=
                  width: 348,
                  height: 168,
                  backgroundColor: `$app.color`,
                  cursor: 'pointer',
                
              >
                <Link to="/details">
                  <div className="pl-4">
                    /* console.log(app.imageUrl[1].card) */
                    <div
                      style=
                        width: 64,
                        height: 64,
                        borderRadius: 16,
                        boxShadow: `0px 4px 8px 2px rgba(3, 21, 49, 0.06)`,
                        marginBottom: 8,
                      
                    >
                      <img
                        src=app.imageUrl[0].icon
                        
                        style= width: 64, borderRadius: 16 
                        className=""
                      />
                    </div>

                    <h2>app.name</h2>
                    <p className="text-base-7 text-2">app.type</p>
                  </div>
                  <div className="">
                    <img
                      src=app.imageUrl[1].card
                      alt=app.name
                      className="absolute bottom-0 right-6"
                      style= marginLeft: 60, width: 164 
                    />
                  </div>
                </Link>
              </div>
            ))
          </div>
      </div>
    </>
  );
;

export default Card;

【参考方案1】：

您可以将变量（状态）作为 prop "displayAxios" 发送到 Card 组件，并将 false 作为默认值。然后你可以用一个handleClick来改变状态。

在Card组件内部，使用基于prop的三元来显示或不显示内容。