如何基于宠物类型实现紫色猫卡、蓝色狗卡的React条件渲染需求

你可以通过动态判断宠物type字段的方式渲染对应样式的卡片，不需要改动现有接口请求和JSON结构，只需要调整AnimalAdopt.tsx的逻辑即可，两种常用实现方式如下：

方案1：拆分独立卡片组件（适合CSS-in-JS场景） #

如果你现有项目用了styled-components/emotion这类CSS-in-JS方案，直接定义两个对应样式的卡片组件即可：

1. 先定义卡片样式

import styled from 'styled-components'

// 狗卡蓝色背景
const DogCard = styled.div`
  background: #1677ff;
  border-radius: 12px;
  padding: 16px;
  /* 其余通用卡片样式 */
`

// 猫卡紫色背景
const CatCard = styled.div`
  background: #722ed1;
  border-radius: 12px;
  padding: 16px;
  /* 和狗卡保持一致的通用样式，仅背景色不同 */
`

2. 修改AnimalAdopt.tsx的渲染逻辑

const AnimalAdopt = ({ animals }) => {
  return (
    <Card className="list-group">
      {animals.map((animal) => {
        // 根据类型选择卡片组件
        const Card = animal.type === 'Dog' ? DogCard : CatCard
        const imgAlt = animal.type === 'Dog' ? '可爱狗狗照片' : '可爱猫猫照片'
        return (
          <Card key={animal.id}>
            <HeaderContainer>
              <HeaderCard>
                <Image>
                  <img src={animal.photo} width='120px' height='120px' alt={imgAlt} />
                </Image>
                <Name>{animal.name}</Name>
              </HeaderCard>
            </HeaderContainer>
            {/* 剩余卡片内容保持原样 */}
          </Card>
        )
      })}
    </Card>
  )
}

方案2：动态绑定类名（适合全局CSS场景） #

如果用普通CSS文件写样式，直接通过类名切换背景即可：

1. 先在全局CSS文件中新增样式类

.dog-card {
  background: #1677ff;
}
.cat-card {
  background: #722ed1;
}

2. 修改AnimalAdopt.tsx的卡片类名

const AnimalAdopt = ({ animals }) => {
  return (
    <Card className="list-group">
      {animals.map((animal) => (
        <Card 
          key={animal.id}
          className={`${animal.type === 'Dog' ? 'dog-card' : 'cat-card'} list-group-item`}
        >
          <HeaderContainer>
            <HeaderCard>
              <Image>
                <img src={animal.photo} width='120px' height='120px' alt={`可爱${animal.type}照片`} />
              </Image>
              <Name>{animal.name}</Name>
            </HeaderCard>
          </HeaderContainer>
          {/* 剩余卡片内容保持原样 */}
        </Card>
      ))}
    </Card>
  )
}

注意事项 #

• 原有代码中animals.map((animals) => ...)的参数名和外层数组重名，需要修改为animal避免取值错误
• 上述代码中的色值可根据设计图实际效果调整

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