React使用map生成卡片列表时，如何单独修改单张卡片？

核心问题分析 #

粉色背景残留的原因是：即使people字段不存在，Section5CardPeople这个div元素依然会被渲染，空div会继承CSS中设置的粉色背景样式。通过条件渲染可以彻底解决这个问题，同时实现价格区域的差异化显示。

具体实现步骤 #

1. 修复底部人数区域的条件渲染

修改Section5Card.jsx中的人数显示部分，仅当people字段存在时才渲染对应的div：

// 替换原来的Section5CardPeople代码
{props.products.people && (
  <div id='Section5CardPeople'>
    {props.products.people}
  </div>
)}

2. 实现价格区域的差异化显示

针对最后一张卡片的折扣价需求，添加条件渲染显示划掉的原价，修改价格区域代码：

// 替换原来的Section5CardPrice代码
<div id='Section5CardPriceArea'>
  {/* 有折扣价时显示划掉的原价 */}
  {props.products.discount && (
    <div id='Section5CardDiscountPrice' style={{textDecoration: 'line-through', color: '#999'}}>
      {props.products.discount}
    </div>
  )}
  <div id='Section5CardPrice'>
    {props.products.price}
  </div>
</div>

3. 完整修改后的Section5Card.jsx

import React from 'react';
import '../section5.css';

function Section5Card(props) {
  return (
    <div id='Section5Card'>
      <img src={props.products.img} id="Section5CardImg" />
      <div id='Section5CardTitle'>
        {props.products.title}
      </div>
      <div id='Section5CardName'>
        {props.products.name}
      </div>
      <div id='Section5CardComment'>
        {props.products.comment}
      </div>
      {/* 修改后的价格区域 */}
      <div id='Section5CardPriceArea'>
        {props.products.discount && (
          <div id='Section5CardDiscountPrice' style={{textDecoration: 'line-through', color: '#999'}}>
            {props.products.discount}
          </div>
        )}
        <div id='Section5CardPrice'>
          {props.products.price}
        </div>
      </div>
      {/* 修改后的人数区域 */}
      {props.products.people && (
        <div id='Section5CardPeople'>
          {props.products.people}
        </div>
      )}
      {props.products.new && (
        <div id='Section5CardNew'>
          {props.products.new}
        </div>
      )}
      {props.products.sale && (
        <div id='Section5CardSale'>
          {props.products.sale}
        </div>
      )}
    </div>
  )
}

export default Section5Card;

效果说明 #

• 前4张卡片：正常显示人数区域的粉色背景和内容，价格区域仅显示现价。
• 最后一张卡片：不渲染人数区域（无粉色背景），价格区域显示划掉的原价+现价，同时保留「새강의」「할인중」标签。

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