React/Typescript問題-無法從繼承的類傳遞道具

我的界面（這是擴展 react-responsive-carousel 庫的 props 界面

import {CarouselProps} from 'react-responsive-carousel';
import SCarouselCard from './SCarouselCard';

interface SCarouselProps extends CarouselProps
{
  style: Record<string, any>
  cards: Array<SCarouselCard>
  id: string
  interval: number
  infiniteLoop: boolean
}

export default SCarouselProps;

我的“卡片”類（這只是部分相關

class SCarouselCard {
    private elements: Array<JSX.Element>;
  
    constructor(els?: Array<JSX.Element>) {
      this.elements = els ? els : [];
    }
    addElement(el: JSX.Element) {
      this.elements.push(el);
    }
  
    render() {
      return (
        <div>
          {this.elements.map((e, i) => (
            <div key={i}>{e}</div>
          ))}
        </div>
      );
    }
  }

  export default SCarouselCard;

我的實際輪播組件，與我要解決的問題有關...

import SCarouselProps from './SCarouselProps';
import SCarouselCard from './SCarouselCard'
import { Carousel } from 'react-responsive-carousel';

class SCarousel extends Carousel
{
    id: string = "";
    style: Record<string, any> = {};
    interval: number = 100000;
    cards: Array<SCarouselCard> = [];
    constructor(props: SCarouselProps) {

        super(props);
        this.id = props.id
        this.style = props.style
        this.interval = props.interval;
        

        this.autoPlay();
      }
      private pause() {
        //this.setState({ autoPlay: false });
        this.destroyAutoPlay();
      }
      private resume() {
        //this.setState({ autoPlay: true });
        this.clearAutoPlay();
        this.autoPlay();
      }
      componentDidUpdate() {
        const videos = Array.from(document.querySelectorAll<HTMLVideoElement>(`#${this.id} video`));
        videos.forEach((video) => {
          video.onplay = () => {
            this.pause();
          };
          video.onpause = () => {
            this.resume();
          };
        });
      }
      render() {
            return <div style={this.style} id={this.id}>
            <Carousel autoPlay={true} interval={this.interval} infiniteLoop={true} showThumbs={false}>
            {this.cards.map((card, i) => (
                <div key={`s_card_${i}`}>{card.render()}</div>
            ))}
            </Carousel>
        </div>

      }
}

export default SCarousel;

我面臨的問題是，什么時候這樣做......

<SCarousel id={'my_id_here'} style={{}}, etc./> ...

錯誤訊息：型別'{ id：字串；}' 不可分配給型別 'IntrinsicAttributes & IntrinsicClassAttributes & Pick<Readonly, never> & InexactPartial<...> & InexactPartial<...>'。屬性 'id' 不存在于型別 'IntrinsicAttributes & IntrinsicClassAttributes & Pick<Readonly, never> & InexactPartial<...> & InexactPartial<...>'

它不會讓我傳遞樣式、卡片、id、間隔、infiniteLoop 等，這些是我的界面中從 CarouselProps 擴展的屬性。Typescript 抱怨我嘗試傳遞的任何道具，而不是從基本介面繼承的原始屬性。請幫忙？

uj5u.com熱心網友回復：

嘗試說明該組件Component使用這些道具實作介面

class SCarousel extends Carousel implements React.Component<SCarouselProps> {
...
}

由于您正在擴展Carousel它假設它具有相同的介面，因此我不相信打字稿會根據建構式引數推斷型別。

注意：附加屬性需要是可選的才能作業

在 React 的檔案中，他們實際上告訴您避免繼承，并且他們從未找到推薦它的案例：https ://reactjs.org/docs/composition-vs-inheritance.html

在這種情況下，您可以看到繼承沒有意義，因為您Carousel在渲染函式中回傳了 的實體。因此，讓這個組件成為一個實體Carousel實際上會在記憶體中創建兩個單獨的輪播。Carousel從SCarousel(using )呼叫方法this.method()實際上不會影響您在其中實體化的組件render- 它們是兩個獨立的組件。

因此，只需擴展React.Component，并將道具向下傳遞。相應地設計您的新組件。

class SCarousel extends React.Component<SCarouselProps> {
...
  render(){
    return (
      ...
      <Carousel {...this.props} >
      ...
    )
  }
}

標籤：反应打字稿

上一篇：使用`suppressImplicitAnyIndexErrors=false`不能將型別“字串”分配給型別“未定義”

下一篇：在feathersJS中等待兩個Promise