React模板页动态填充数据：点击图片切换详情内容的实现方案咨询

第一步：统一数据结构，存到外部文件 #

把所有图片和对应信息整理成数组，放在单独的data.js文件里，后续改数据不用动组件代码：

// data.js
export const carouselData = [
  {
    id: 1,
    imgUrl: '/path/to/image1.jpg',
    title: '标题1',
    attributes: ['属性1-1', '属性1-2', '属性1-3'],
    description: '这是第一张图片对应的详情描述...'
  },
  {
    id: 2,
    imgUrl: '/path/to/image2.jpg',
    title: '标题2',
    attributes: ['属性2-1', '属性2-2'],
    description: '这是第二张图片对应的详情描述...'
  },
  {
    id: 3,
    imgUrl: '/path/to/image3.jpg',
    title: '标题3',
    attributes: ['属性3-1', '属性3-2', '属性3-3', '属性3-4'],
    description: '这是第三张图片对应的详情描述...'
  }
];

第二步：主组件用useState管理当前选中项 #

在主组件里导入数据，用useState存储当前选中的轮播项，点击图片时更新这个状态：

import { useState } from 'react';
import { carouselData } from './data';
import DescriptionPage from './DescriptionPage';

function MainPage() {
  // 初始选中第一个轮播项
  const [activeItem, setActiveItem] = useState(carouselData[0]);

  return (
    <div className="container">
      {/* 左侧轮播区域 */}
      <div className="carousel">
        {carouselData.map(item => (
          <img
            key={item.id}
            src={item.imgUrl}
            alt={item.title}
            className={activeItem.id === item.id ? 'active' : ''}
            onClick={() => setActiveItem(item)} // 点击时直接把当前项设为选中状态
          />
        ))}
      </div>
      {/* 右侧详情区域 */}
      <DescriptionPage data={activeItem} />
    </div>
  );
}

export default MainPage;

第三步：详情页接收props直接渲染 #

DescriptionPage只需要接收传入的data，直接渲染对应内容即可：

function DescriptionPage({ data }) {
  return (
    <div className="description">
      <h2>{data.title}</h2>
      <div className="attributes">
        {data.attributes.map((attr, index) => (
          <p key={index}>{attr}</p>
        ))}
      </div>
      <p className="desc">{data.description}</p>
    </div>
  );
}

export default DescriptionPage;

逻辑说明 #

• useState的作用：React是数据驱动UI，只要activeItem状态更新，详情页会自动同步渲染对应内容，不用手动修改每个<p>元素。
• 外部数据文件：把数据和组件逻辑分离，后续要新增图片、修改属性/描述，直接改data.js就行，不用动组件代码，维护更高效。

如果用了第三方轮播组件（比如react-slick），逻辑一致：在轮播的onChange事件里拿到当前项的索引，从carouselData中取出对应对象更新activeItem即可。

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