React组件如何动态遍历不同传入的props？

核心思路 #

不要让组件绑定固定的数组名（比如Songs），而是让它接收通用的数据源，或者动态处理传入的多个数组，以此实现组件复用，遍历不同类型的props数组。

方案1：使用单一通用数据源Props（推荐） #

将组件改为接收一个名为items的通用props，父组件根据需求传入Songs、KidsMovies、Movies或TvShows数组即可。同时为了适配不同数组的字段差异，可增加字段映射配置。

修改后的组件代码 #

import React from 'react';
import { FaCaretDown } from 'react-icons/fa';

function ImageSlider({ items, fieldMap = {} }) {
    // 定义默认字段映射，适配不同数据源的字段名
    const defaultFields = {
        poster: 'poster',
        title: 'song',
        description: 'artist',
        overview: ''
    };
    // 合并默认配置与传入的字段映射
    const fields = { ...defaultFields, ...fieldMap };

    return (
        <>
            {items.map((item, index) => (
                <div key={index} className="movie-card">
                    {/* 根据字段映射处理海报地址，兼容不同数据源的前缀差异 */}
                    <img 
                        src={fields.poster.includes('poster_path') 
                            ? `https://image.tmdb.org/t/p/w500${item[fields.poster]}` 
                            : item[fields.poster]} 
                        className='movie-img' 
                        alt={item[fields.title]}
                    />
                    
                    <h5 className='movie-card-desc'>{item[fields.title]}</h5>
                    {/* 仅当存在overview字段时渲染 */}
                    {item[fields.overview] && (
                        <p className='movie-card-overview'>{item[fields.overview]}</p>
                    )}
                </div>
            ))}
        </>
    );
}

export default ImageSlider;

父组件使用示例 #

// 传入Songs数组时，指定对应字段映射
<ImageSlider 
  items={Songs} 
  fieldMap={{ title: 'song', description: 'artist', poster: 'poster' }} 
/>

// 传入Movies数组时，适配TMDB的字段规则
<ImageSlider 
  items={Movies} 
  fieldMap={{ title: 'original_title', poster: 'poster_path', overview: 'overview' }} 
/>

方案2：同时遍历多个传入的数组 #

如果需要在同一个滑块中展示多组数据源的内容，可以将所有传入的数组合并后统一遍历：

import React from 'react';
import { FaCaretDown } from 'react-icons/fa';

function ImageSlider({ Songs, KidsMovies, Movies, TvShows }) {
    // 合并所有传入的数组，过滤空数组避免报错
    const allItems = [
        ...(Songs || []),
        ...(KidsMovies || []),
        ...(Movies || []),
        ...(TvShows || [])
    ];

    return (
        <>
            {allItems.map((item, index) => (
                <div key={index} className="movie-card">
                    <img 
                        src={item.poster_path 
                            ? `https://image.tmdb.org/t/p/w500${item.poster_path}` 
                            : item.poster} 
                        className='movie-img' 
                        alt={item.song || item.original_title}
                    />
                    
                    <h5 className='movie-card-desc'>{item.song || item.original_title}</h5>
                    <p className='movie-card-overview'>{item.overview || item.artist}</p>
                </div>
            ))}
        </>
    );
}

export default ImageSlider;

关键注意点 #

• 给map生成的元素添加唯一key（如index或数据自带的唯一ID），避免React控制台警告。
• 原组件存在变量名错误：{movie.overview}应改为{image.overview}，需保持变量名统一。
• 不同数据源字段名不一致（如Songs的poster和Movies的poster_path），必须通过字段映射或统一数据结构处理，否则会出现渲染异常。

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