如何实现React中点击按钮切换显示Products对应数组内容？

实现思路 #

• 用React的useState钩子管理当前要展示的数据集标识
• 给每个按钮绑定点击事件，切换当前数据集标识
• 根据当前标识从Products中取出对应数组，遍历渲染内容

完整修改后的App组件代码 #

import React, { useState } from 'react'
import Products from './data' // 根据实际项目结构调整导入路径

const App = () => {
  // 初始化默认展示的数据集，默认显示one数组
  const [activeSet, setActiveSet] = useState('one')
  // 获取当前要渲染的商品数组
  const currentProducts = Products[activeSet]

  return (
    <>
      <div>App</div>
      {/* 绑定按钮点击事件，切换数据集标识 */}
      <button onClick={() => setActiveSet('one')}>Button 1</button>
      <button onClick={() => setActiveSet('two')}>Button 2</button>
      <button onClick={() => setActiveSet('three')}>Button 3</button>

      {/* 渲染当前选中的商品内容 */}
      <div className="products-wrap">
        {currentProducts.map(item => (
          <div key={item.id} className="product-card">
            {/* 兼容Products中不一致的图片属性名，建议统一改为img */}
            <img src={item.img || item.img1} alt={`商品${item.id}`} />
          </div>
        ))}
      </div>
    </>
  )
}

export default App

注意事项 #

• 确认Products文件的导入路径与项目结构匹配
• 建议统一Products对象中商品的图片属性名（比如全部改为img），避免渲染时需要兼容处理
• 可自行添加CSS样式优化商品列表的展示布局

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