React JS点击Product-Preview div实现product.description显隐的方案咨询

你只需要在ProductList组件中添加状态记录当前展开的商品ID，绑定点击事件后给描述文本加显隐判断逻辑即可，无需修改父组件Products的代码。

单开模式（同一时间仅展开一个卡片） #

修改后的ProductList完整代码如下：

import { useState } from "react";

const ProductList = (props) => {
    const products = props.products;
    // 存储当前展开描述的商品ID，为null时所有卡片描述都收起
    const [expandedProductId, setExpandedProductId] = useState(null);

    const toggleDescription = (productId) => {
        // 如果点击的是当前已展开的卡片则收起，否则展开点击的卡片
        setExpandedProductId(prev => prev === productId ? null : productId);
    }

    return ( 
        <div className="ProductList" >
            {products.map((product) => (
                <div 
                    className="Product-Preview" 
                    key={product.id}
                    onClick={() => toggleDescription(product.id)}
                >
                    <div className="backdrop" style={{backgroundImage: `url(${product.image})`}}></div>
                    <h2>{ product.title }</h2>
                    {/* 仅当前卡片ID匹配展开ID时显示描述 */}
                    {expandedProductId === product.id && <p>{ product.description }</p>}
                    <div>{ product.price }</div><br />
                </div>
                
            ))}
        </div>
    );
}

export default ProductList;

多开模式（支持同时展开多个卡片） #

如果需要支持同时展开多个卡片的需求，可以调整状态逻辑为存储已展开ID的数组，代码示例如下：

import { useState } from "react";

const ProductList = (props) => {
    const products = props.products;
    // 存储所有已展开的商品ID数组
    const [expandedIds, setExpandedIds] = useState([]);

    const toggleDescription = (productId) => {
        setExpandedIds(prev => 
            prev.includes(productId) 
                ? prev.filter(id => id !== productId) 
                : [...prev, productId]
        )
    }

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

export default ProductList;

如果你需要给显隐加过渡动画，可以把条件渲染改成动态绑定className或者style的display/opacity属性，配合CSS过渡实现即可。

内容的提问来源于stack exchange，提问作者EmFor