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

我得到的错误是关于{Array（等等。}。某种程度上类型不正确。如何解决这个问题？

[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需要是一个字符串（不推荐）使用ref = {i.toString()}或（最好）一个函数：ref = {x => /* whatever with x */}。

根据此代码，您可能想写key，而不是ref？

类型不能分配给＆＃39; IntrinsicClassAttributes＆lt;＆gt;

1 个答案: