Typ ist nicht dem Typ 'IntrinsicClassAttributes <>

Question

zuweisbar. Unten ist eine Rendermethode. Und ich benutze Typoskript. Ich wiederhole eine x-Anzahl, um mehrere React-Komponenten anzuzeigen.

render() { 
    return (
     <div className="bleed"> 
      <ul className="list-door"> 
       {Array(this.numberOfDoors).fill(1).map((el, i) => 
        <!-- line 28 --><li key={i}><Door id={i} ref={i} 
             updateScoreHandler={this.props.updateScoreHandler} 
             gameOverHandler={this.props.gameOverHandler}/> 
        </li> 
       )} 
      </ul> 
     </div> 
    ) 
} 

Der Fehler, den ich bekommen, ist über die {Array (etc.etc.} Irgendwie ist der Typ ist falsch. Wie dieses Problem beheben?

ERROR in [at-loader] ./src/components/ ListDoor.tsx: 28: 43

TS2322: Type '{ id: number; ref: number; updateScoreHandler: (door: Door) => void; gameOverHandler:() => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Door> & Readonly<{ children?: ReactNode 
; }> & Read...'. 
    Type '{ id: number; ref: number; updateScoreHandler: (door: Door) => void; gameOverHandler:() => void; }' is not assignable to type 'IntrinsicClassAttributes<Door>'. 
    Types of property 'ref' are incompatible. 
     Type 'number' is not assignable to type 'Ref<Door>'. 

Answer 1

ref Bedarf entweder eine Zeichenfolge sein (diese veraltet ist) verwenden ref = {i.toString()} oder (vorzugsweise) eine Funktion:. ref = {x => /* whatever with x */}

Es scheint so, als ob Sie hier wahrscheinlich key, nicht ref schreiben würden, basierend auf diesem Code?