如何在单个React组件中多次渲染不同数据集以减少重复代码

核心实现思路 #

将原多份重复的Slider组件抽离为通用组件，把食谱数据集、轮播配置作为可传入参数，内部内置统一的卡片渲染、轮播交互、移动端适配逻辑，完全消除同类组件重复代码。

通用Slider组件代码实现 #

// 通用食谱轮播组件 CommonRecipeSlider.jsx
import RecipeCard from './RecipeCard'
// 你的自研轮播依赖引入
// import Swiper from 'swiper' 等

const CommonRecipeSlider = ({ 
  recipeList, // 传入的食谱数据集
  sliderConfig = {} // 可选：轮播自定义配置，如自动播放、滑动速度等
}) => {
  // 内置统一的移动端适配逻辑、轮播初始化逻辑
  return (
    <div className="common-recipe-slider" {...sliderConfig}>
      {recipeList?.map((recipeItem, idx) => (
        <RecipeCard
          key={`recipe-${idx}-${recipeItem.id}`}
          // 透传食谱所有字段给卡片组件
          {...recipeItem}
        />
      ))}
    </div>
  )
}

export default CommonRecipeSlider

海鲜意面分类映射异常修复 #

当前海鲜意面分类渲染异常，优先排查以下两点即可解决：

• 确认海鲜意面数据集的字段命名是否和其他食谱数据集一致，是否缺失id、菜品名称、封面图等卡片组件必填字段
• 若字段规则特殊，可在传入通用组件前做一层统一格式转换：

// 海鲜意面数据集格式转换
const formatSeafoodPastaData = (rawData) => {
  return rawData.map(item => ({
    // 字段对齐其他食谱数据集的规则
    id: item.dishId,
    title: item.pastaName,
    coverImg: item.coverUrl,
    description: item.desc,
    cookingTime: item.time
  }))
}

页面调用示例 #

所有分类轮播统一调用同一个通用组件，传入对应数据集即可：

// 食谱页面调用
import CommonRecipeSlider from './CommonRecipeSlider'
// 引入各分类食谱原始数据集
import chineseFoodList from '@/data/chineseFood'
import dessertList from '@/data/dessert'
import rawSeafoodPastaList from '@/data/seafoodPasta'

// 转换异常分类数据集
const seafoodPastaList = formatSeafoodPastaData(rawSeafoodPastaList)

const RecipeHome = () => {
  return (
    <div className="recipe-home-page">
      {/* 中餐分类轮播 */}
      <CommonRecipeSlider recipeList={chineseFoodList} />
      {/* 甜点分类轮播 */}
      <CommonRecipeSlider recipeList={dessertList} />
      {/* 海鲜意面分类轮播 */}
      <CommonRecipeSlider recipeList={seafoodPastaList} />
    </div>
  )
}

移动端适配说明 #

项目为移动端优先设计，可直接在通用Slider组件内内置响应式规则：仅在视口宽度<768px时启用轮播滑动交互，PC端可自动切换为栅格布局，无需每个轮播单独做适配。

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