React/TypeScript继承类无法传递自定义Props问题求助

问题原因 #

继承Carousel类组件时，若未显式指定自定义Props类型，TypeScript会默认沿用父组件的CarouselProps类型，导致新增的自定义属性（如id、style）无法被识别，从而抛出类型不兼容错误。

解决方案步骤 #

1. 正确定义自定义Props接口 #

确保SCarouselProps完整继承CarouselProps，并添加自定义属性：

import { CarouselProps } from 'react-responsive-carousel';
import type { CSSProperties } from 'react';

interface SCarouselProps extends CarouselProps {
  style?: CSSProperties;
  cards?: React.ReactNode[];
  id?: string;
  // 若父组件已有interval/infiniteLoop，确保类型兼容（可省略重复定义）
}

2. 显式指定组件的泛型Props类型 #

继承Carousel时，必须通过泛型参数声明组件使用的是自定义的SCarouselProps，而非父类默认的Props类型：

import { Carousel } from 'react-responsive-carousel';

class SCarousel extends Carousel<SCarouselProps> {
  constructor(props: SCarouselProps) {
    // 分离自定义属性与父组件需要的属性
    const { id, style, cards, ...carouselProps } = props;
    
    // 传递父组件所需属性给super
    super(carouselProps);
    
    // 处理自定义属性的逻辑（如存储到实例、修改state等）
    this.customId = id;
    this.cards = cards;
  }

  // 自定义渲染逻辑示例
  render() {
    return (
      <div id={this.props.id} style={this.props.style}>
        {/* 复用父组件的渲染逻辑，或自定义渲染 */}
        {super.render()}
        {/* 或使用自定义cards渲染 */}
        {/* <Carousel {...this.props}>
          {this.props.cards?.map((card, idx) => (
            <SCarouselCard key={idx}>{card}</SCarouselCard>
          ))}
        </Carousel> */}
      </div>
    );
  }
}

3. 使用组件时传递自定义属性 #

此时再传递自定义属性就不会触发TypeScript报错：

<SCarousel 
  id="my_id_here" 
  style={{ margin: '20px' }}
  cards={[<div>Card 1</div>, <div>Card 2</div>]}
  infiniteLoop={true}
/>

额外注意事项 #

• 若父组件CarouselProps已包含interval、infiniteLoop等属性，无需重复定义，直接继承即可，避免类型冲突。
• 如果使用函数组件，可通过Omit或Pick组合类型，再用forwardRef处理组件传递，类组件核心是显式指定泛型参数。

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