如何复用React的ItemCard组件在多个路由组件中？

1. 先确保 ItemCard 是通用接收 props 的组件 #

核心原则：ItemCard 只负责UI渲染，所有动态内容完全由父组件通过 props 传入，不要在组件内部写死数据逻辑。

示例 ItemCard.js 代码：

import React from 'react';

// 定义组件接收的props，根据你实际需要展示的字段调整
const ItemCard = ({ title, coverImage, rating, releaseDate, description }) => {
  return (
    <div className="holder-item">
      <img src={coverImage} alt={title} />
      <h3>{title}</h3>
      {/* 可选字段：如果父组件传了就渲染，没传就不显示 */}
      {description && <p className="item-desc">{description}</p>}
      <p>评分: {rating}</p>
      <span>上线日期: {releaseDate}</span>
    </div>
  );
};

export default ItemCard;

2. 在各父组件中复用 ItemCard #

每个路由对应的组件（Movies/TvShows/Series/Cartoons）只需要管理自己的数据，然后通过循环把数据传递给 ItemCard 即可。

示例：Movies 组件复用代码

import React from 'react';
import ItemCard from './ItemCard';

const Movies = () => {
  // 这里可以是API请求来的真实数据，也可以是本地模拟数据
  const moviesData = [
    {
      id: 1,
      title: "星际穿越",
      coverImage: "https://example.com/interstellar.jpg",
      rating: 9.3,
      releaseDate: "2014-11-07",
      description: "一组宇航员穿越虫洞的科幻冒险故事"
    },
    {
      id: 2,
      title: "盗梦空间",
      coverImage: "https://example.com/inception.jpg",
      rating: 9.4,
      releaseDate: "2010-09-01"
    }
  ];

  return (
    <div className="movies-container">
      <h2>热门电影</h2>
      <div className="items-grid">
        {/* 循环数据，给每个ItemCard传递对应props */}
        {moviesData.map(movie => (
          <ItemCard
            key={movie.id}  {/* 必须加唯一key，避免React渲染警告 */}
            title={movie.title}
            coverImage={movie.coverImage}
            rating={movie.rating}
            releaseDate={movie.releaseDate}
            description={movie.description} {/* 可选字段，按需传递 */}
          />
        ))}
      </div>
    </div>
  );
};

export default Movies;

其他组件（如 TvShows）复用逻辑完全一致

只需要替换自己的数据源即可，比如：

import React from 'react';
import ItemCard from './ItemCard';

const TvShows = () => {
  const tvShowsData = [
    {
      id: 1,
      title: "绝命毒师",
      coverImage: "https://example.com/breaking-bad.jpg",
      rating: 9.7,
      releaseDate: "2008-01-20"
    },
    // 更多剧集数据...
  ];

  return (
    <div className="tv-shows-container">
      <h2>热门剧集</h2>
      <div className="items-grid">
        {tvShowsData.map(show => (
          <ItemCard
            key={show.id}
            title={show.title}
            coverImage={show.coverImage}
            rating={show.rating}
            releaseDate={show.releaseDate}
          />
        ))}
      </div>
    </div>
  );
};

export default TvShows;

关键注意点 #

• props 字段对齐：确保父组件传递的 props 名称和 ItemCard 接收的名称一致；如果有字段差异，可在 ItemCard 中做可选处理（比如用 && 判断是否渲染）。
• 唯一 key：循环渲染组件时必须给每个 ItemCard 加唯一的 key（优先用数据的 id，不要用索引）。
• 数据逻辑隔离：每个父组件自己负责数据的获取（比如 API 请求）、筛选等逻辑，ItemCard 只专注于展示。

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