代码之家 › 专栏 › 技术社区 › Octavian Niculescu

类型“number”不可分配给类型void |析构函数

typescript reactjs

0

Octavian Niculescu · 技术社区 · 4 年前

DragableGameStart

import DraggableGameAnswers from './DraggableGameAnswers';
import { useRef } from 'react';

function DraggableGameStart() {
    const draggableGame = useRef<HTMLDivElement>(null);

    return (
        <div className="draggable-game-content">
            <div className="draggable-game" ref={draggableGame}>
                    <DraggableGameAnswers elementBounds={draggableGame}/>
                </div>
            </div>
        </div>
    );
}

export default DraggableGameStart;

单调的游戏答案

import { RefObject } from 'react';
import { useEffect } from 'react';

type DraggableGameAnswersProps = {
    elementBounds: RefObject<HTMLDivElement>
}

function DraggableGameAnswers(props: DraggableGameAnswersProps) {
    let boundsArray: Array<number>[];
    useEffect(
        () => 
        boundsArray.push(props.elementBounds.current?.getBoundingClientRect().top)
    )  
    
    return (
        <div className="draggable-game-answers">
            test
        </div>
    );
}

export default DraggableGameAnswers;

但我有一些错误:

Type number is not assignable to type 'void | Destructor' ;
Argument of type 'number | undefined' is not assignable to parameter of type 'number[]'.
  Type 'undefined' is not assignable to type 'number[]'.

我真的不明白为什么。

为什么会抛出这些错误?我如何修复它们?

根据评论,我改为这一行

let boundsArray: Array<number>;

Argument of type 'number | undefined' is not assignable to parameter of type 'number'.
  Type 'undefined' is not assignable to type 'number'.

0 回复 | 直到 4 年前

1

0

Alex Wayne 4 年前

此错误对于您阅读和理解非常重要。

Argument of type 'number | undefined' is not assignable to parameter of type 'number'.
  Type 'undefined' is not assignable to type 'number'.

props.elementBounds.current?.getBoundingClientRect().top

不会总是一个数字。如果 current 财产是 undefined 然后你得到 未定义 number | undefined .

你把它推到了一系列 number s、这是不能接受的 未定义

要修复它,只需检查该值是否为空 null 或在将其推送到阵列之前。

    let boundsArray: Array<number>;
    useEffect(() => {
      const value = props.elementBounds.current?.getBoundingClientRect().top
      if (value != null) {
        boundsArray.push(value) // works
      }
    })

Working example

2

-1

DaveVanFleet 4 年前

该错误通常意味着您传递的道具与您为组件定义的typescript接口不匹配。我认为在这种情况下,你需要的是转发裁判,而不是将裁判作为普通道具传递。它可能看起来像:

import { React, useEffect } from 'react';

const DraggableGameAnswers = React.forwardRef((props, ref) {
    let boundsArray: Array<number>[];
    useEffect(
        () => 
        boundsArray.push(ref.current?.getBoundingClientRect().top)
    )  
    
    return (
        <div className="draggable-game-answers">
            test
        </div>
    );
})

export default DraggableGameAnswers;

然后把它叫做 <DraggableGameAnswers ref={draggableGame}/> 如果它不能解决问题,至少可以为你指出一个不同的方向。