如何在Sitecore Next.js中实现基于动态子幻灯片的轮播组件？

原示例通过硬编码固定幻灯片数量，无法适配Sitecore中动态添加的子幻灯片。以下是改造后的动态渲染版本：

函数组件版本（推荐，符合Next.js现代写法） #

import React from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';

// 接收Sitecore传递的组件数据
export default function DynamicCarousel({ fields }) {
  // 从Sitecore字段中获取幻灯片列表，字段名需与Sitecore模板定义一致
  const slides = fields.slides || [];

  return (
    <div>
      <h2>动态轮播 - Sitecore驱动</h2>
      <Carousel>
        {slides.map((slide, index) => (
          <div key={slide.id || index}>
            <img 
              src={slide.fields.image?.value?.src} 
              alt={slide.fields.image?.value?.alt || `幻灯片${index + 1}`} 
            />
            {slide.fields.legend && <p className="legend">{slide.fields.legend}</p>}
          </div>
        ))}
      </Carousel>
    </div>
  );
}

类组件版本（兼容原示例写法） #

import React, { Component } from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';

export default class DynamicCarousel extends Component {
    render() {
        const { fields } = this.props;
        const slides = fields.slides || [];

        return (
            <div>
                <h2>动态轮播 - Sitecore驱动</h2>
                <Carousel>
                    {slides.map((slide, index) => (
                        <div key={slide.id || index}>
                            <img 
                                src={slide.fields.image?.value?.src} 
                                alt={slide.fields.image?.value?.alt || `幻灯片${index + 1}`} 
                            />
                            {slide.fields.legend && <p className="legend">{slide.fields.legend}</p>}
                        </div>
                    ))}
                </Carousel>
            </div>
        );
    }
};

关键说明 #

• 数据传递：Sitecore会将Carousel项的子幻灯片数据通过props.fields.slides传递给组件，需确保Sitecore模板中Carousel项配置了可添加多个Slide子项，且每个Slide包含image（媒体字段）和legend（文本字段）
• 循环渲染：用map遍历幻灯片数组，为每个项设置唯一key（优先用Sitecore项IDslide.id，无则用索引）
• 空值处理：使用可选链?.避免图片或字段为空时报错，同时为alt属性设置默认值
• 条件渲染：仅当legend字段有内容时才渲染说明文字

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