时间戳

首页 > 解决方案 > Div 在 React JS 中出现和消失

javascript - Div 在 React JS 中出现和消失

问题描述

我想在点击时显示卡片上的内容（标记为红色并product.description在代码中命名），但我不知道有什么办法。

卡片上的内容是从 JSON-server 获取的。

这是一些代码

第一个js用于从服务器获取数据并显示在页面上，第二个是在页面上显示数据的方法。一般来说，我希望p标签在用户单击名为的主 div 时出现和消失Product-Preview

import { useEffect, useState } from "react";
import ProductList from "./ProductList";

const Products = () => {
    const [products, setProducts] = useState (null);

    useEffect (() => {
        fetch('http://localhost:8000/products')
            .then(res => {
                return res.json();
            })
            .then(data => {
                setProducts(data);
            })
    }, []);
    
    return ( 
        <div className="ProductList">
            {products && <ProductList products={products}/>}
        </div>
    );
}

export default Products;

const ProductList = (props) => {
    const products = props.products;


    return ( 
        <div className="ProductList" >
            {products.map((product) => (
                <div className="Product-Preview" key={product.id}>
                    <div className="backdrop" style={{backgroundImage: `url(${product.image})`}}></div>
                    <h2>{ product.title }</h2>
                    <p>{ product.description }</p>
                    <div>{ product.price }</div><br />
                </div>
                
            ))}
        </div>
    );
}

export default ProductList;

标签： javascripthtmlreactjs

解决方案

您应该创建一个组件并使用该组件中的状态来执行此操作。

示例组件的名称为Card

const Card= ({ product }) => {
  const [showDescription, setShowDescription] = useState(false);

  return (
    <div
      className="Product-Preview"
      onClick={() => setShowDescription(!showDescription)}
    >
      <div className="backdrop" style={{ backgroundImage: `url(${product.image})` }}></div>
      <h2>{product.title}</h2>
      {showDescription && <p>{product.description}</p>}
      <div>{product.price}</div>
      <br />
    </div>
  );
};

并在地图中使用这个组件

{
  products.map((product) => <Card product={product} key={product.id} />);
}

推荐阅读