React卡片组件复用问题：如何实现单卡片自定义与灵活渲染？

看来你遇到了React组件复用性的典型问题——你的CardItem现在紧耦合了CardData数组，导致它每次渲染都只能输出全部3张卡片，完全没法灵活控制展示内容。咱们来重构一下，让组件变得更灵活：

1. 重构CardItem为原子组件 #

把CardItem改成接收单个卡片属性的纯展示组件，不再直接依赖全局的CardData，这样它就能渲染任意单张卡片：

import React from 'react';
import { Link } from 'react-router-dom';

function CardItem({ src, text, label, path }) {
  return (
    <li className='cards__item'> {/* 注意：React中要用className替代class */}
      <Link className='cards__item__link' to={path}>
        <figure className='cards__item__pic-wrap' data-category={label}>
          <img className='cards__item__img' alt='Travel Destination' src={src} />
        </figure>
        <div className='cards__item__info'>
          <h5 className='cards__item__text'>{text}</h5>
        </div>
      </Link>
    </li>
  );
}

export default CardItem;

2. 改造Cards组件实现灵活渲染 #

现在Cards可以作为容器组件，根据需求传递不同的卡片数据给CardItem，支持渲染全部卡片、部分卡片甚至自定义单张卡片：

import './Cards.css';
import CardItem from './CardItem';
import { CardData } from './CardData';

function Cards() {
  return (
    <div className='cards'>
      <h1>Check out these!</h1>
      <div className='cards__container'>
        <div className='cards__wrapper'>
          {/* 渲染全部3张卡片 */}
          <ul className='cards__items'>
            {CardData.map((item, index) => (
              <CardItem key={index} {...item} /> {/* 扩展运算符传递所有属性 */}
            ))}
          </ul>

          {/* 只渲染前2张卡片 */}
          <ul className='cards__items'>
            {CardData.slice(0, 2).map((item, index) => (
              <CardItem key={index} {...item} />
            ))}
          </ul>

          {/* 完全自定义单张卡片 */}
          <ul className='cards__items'>
            <CardItem 
              src='images/custom-img.jpg' 
              text='My Personal Travel Spot' 
              label='Private' 
              path='/my-spot' 
            />
          </ul>
        </div>
      </div>
    </div>
  );
}

export default Cards;

3. 进阶优化：让Cards支持外部传参 #

如果需要在多个页面复用Cards组件展示不同的卡片列表，可以进一步让它接收外部数据：

// 优化后的Cards组件
function Cards({ cardData, title = "Check out these!" }) {
  return (
    <div className='cards'>
      <h1>{title}</h1>
      <div className='cards__container'>
        <div className='cards__wrapper'>
          <ul className='cards__items'>
            {cardData.map((item, index) => (
              <CardItem key={item.id} {...item} /> {/* 建议给每个item加唯一id替代index作为key */}
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}

// 使用示例
<Cards cardData={CardData} />
<Cards cardData={[CardData[0], CardData[2]]} title="Top Picks" />
<Cards cardData={[{ id: 1, src: '...', text: '...', label: '...', path: '...' }]} title="Single Card" />

重构后的好处 #

• CardItem变成了通用的原子组件，只负责渲染单个卡片，不关心数据来源
• Cards作为容器组件，完全控制要展示的卡片数量、内容和布局
• 轻松实现分栏展示不同内容、自定义单张卡片等需求，解决了之前的复用性问题

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