タイプが 'IntrinsicClassAttributes <タイプ>'に割り当てられません

Question

以下はレンダリングメソッドです。私はTypescriptを使用しています。 x回繰り返して複数のReactコンポーネントを表示しています。

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> 
    ) 
} 

私が手にエラーが約ある{アレイ（etc.etc。}なんとなくタイプが正しくありません。この問題を解決するには？で

ERROR [アット・ローダー] ./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ニーズ（これは廃止され）文字列でいずれかは、（好ましくは）ref = {i.toString()}または関数を使用します。ref = {x => /* whatever with x */}を

keyと書くのはおそらくrefではなく、このコードに基づいているようですね。