React：如何让同一组件兼容不同命名的Props数据源

The core solution here is to normalize your data into the format your Card component expects before passing it down. There are two clean, practical approaches to handle this—let’s break them down.

Approach 1: Use a Custom Item Mapper (Recommended) #

This method gives you explicit control over data transformation and scales seamlessly if you add more data sources later.

Step 1: Keep Your Card Component Simple #

First, define your Card component to accept the standard props (title, description, image) with fallback handling for missing values:

const Card = ({ title, description, image }) => {
  return (
    <div className="card">
      {/* Handle cases where image might be null */}
      {image && <img src={image.fluid.src} alt={title || "Card image"} />}
      <h3>{title || "Untitled"}</h3>
      <p>{description || ""}</p>
    </div>
  );
};

Step 2: Build the ImageSlider with Mapper Support #

Create the ImageSlider to accept a data array and an optional itemMapper function. The mapper converts each raw data item into the props the Card component needs:

// Default mapper for your first data source (carouselContent)
const defaultItemMapper = (item) => ({
  title: item.title,
  description: item.description,
  image: item.image,
});

const ImageSlider = ({ data, itemMapper = defaultItemMapper }) => {
  return (
    <div className="image-slider">
      {data.map((item) => {
        const cardProps = itemMapper(item);
        return <Card key={item.id} {...cardProps} />;
      })}
    </div>
  );
};

Step 3: Use the Slider for Both Data Sources #

For carouselContent, use the default mapper (no extra props needed):

<ImageSlider data={carouselContent} />

For relatedPrograms, pass a custom mapper that maps its unique fields to the Card’s standard props:

// Custom mapper for relatedPrograms
const relatedProgramsMapper = (item) => ({
  title: item.fullProgramName,
  description: item.metaDescription,
  image: item.heroImage, // The Card component will handle null values
});

<ImageSlider data={relatedPrograms} itemMapper={relatedProgramsMapper} />

Approach 2: Auto-Detect Fields (Quick Fix for Two Sources) #

If you only need to support these two specific data sources, you can auto-detect which fields exist in each item and map them accordingly. This is less explicit but works for simple use cases:

const ImageSlider = ({ data }) => {
  const mapItemToCardProps = (item) => ({
    title: item.fullProgramName || item.title || "Untitled",
    description: item.metaDescription || item.description || "",
    image: item.heroImage || item.image,
  });

  return (
    <div className="image-slider">
      {data.map((item) => (
        <Card key={item.id} {...mapItemToCardProps(item)} />
      ))}
    </div>
  );
};

// Usage for both sources—no extra mappers needed!
<ImageSlider data={carouselContent} />
<ImageSlider data={relatedPrograms} />

Why Approach 1 is Preferred #

• Explicit: You can see exactly how data is transformed when using the component, making debugging and maintenance easier.
• Scalable: Adding a third data source only requires writing a new mapper function—no changes to the core ImageSlider logic.
• Maintainable: If one data source’s structure changes, you only update its corresponding mapper instead of touching the slider itself.

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