Typescript错误(2345)当push元素到元素数组(React js)

Question

我对Typescript很陌生，我试图将我在Reactjs上的一个组件迁移到Typescript。这个组件应该接收一个0-10的数字作为道具，并根据这个数字填充一个星形组件数组，这些组件是我从React图标中导入的图标。一旦数组被填充，就由组件渲染。但是当我试图把这些元素推到数组typescript抛出一个错误，如果这些元素不是Jsx元素类型。我发现它工作的唯一方法是设置

let starsArray: Element[] | any = [];

但我的想法是不留下任何东西作为"任何";类型;

import React, { useState, useEffect } from "react";
import { BsStarFill } from "react-icons/bs";
interface PropsInterface {
stars: number;
big?: boolean;
}
const Stars: React.FC<PropsInterface> = ({ stars, big }) => {
const [array, setArray] = useState<Element[]>([]);
useEffect(() => {
let starsArray: Element[] = [];
let starsAmount: number = Math.round(stars) / 2; //gets rating from props and turns it into integer divided by two (ratings were 1-10 and we needed 1-5 stars);
for (let i = 0; i < 5; i++) {
//goes throught 1-5 and if the rating amount is higher or equal on each iteration it pushes a filled star component to  starsArray, else it pushes an empty star
if (starsAmount > i) {
starsArray.push(<BsStarFill className="star--filled" key={i} />);
} else {
starsArray.push(<BsStarFill className="star--unfilled" key={i} />);
}
}
setArray(starsArray);
}, []);
return (
<div className={big ? "stars --bigstars" : "stars"}>
{Object.values(array).map((each) => each)}
</div>
);
};
export default Stars;

这些用红色下划线显示错误的行

(<BsStarFill className="star--unfilled" key={i} />)

(<BsStarFill className="star--filled" key={i} />)

这是完整的错误:

JSX类型的参数。Element'不能赋值给'Element'类型的参数。类型"ReactElement<any,>"从类型"Element"中缺少以下属性:attributes, classList, className, clienttheight和123 more.ts(2345)

我真的很感激你的帮助，谢谢!

Answer 1

更新:在尝试不同的解决方案后，我发现自己通过设置数组和StarsArray作为ReactNodes类型的数组来修复错误;

Starsarray: ReactNode[] = [];

一个更一般的解释:TypeScript希望你显式定义数组元素的类型。你声明的数组元素类型必须匹配TypeScript期望看到的类型。下面是一个简单的例子:

interface ISomething {
arr: string[]
}
// Somewhere in a class a method uses ISomething interface.
public someMethod(): ISomething['arr'] {
// Note, if you omit ": ISomething['arr']" in the line below
// you would face ts2345 error when you push a string into the array later.
const localArray: ISomething['arr'] = [];
localArray.push('somestring');
return localArray;
}

Answer 2

所以编译器说<BsStarFill />是JSX.Element。但是你已经将数组和星号数组声明为Element[]这是一种不同的类型

let starsArray: JSX.Element[] = [];
const [array, setArray] = useState<JSX.Element[]>([]);

将这些更改为正确的类型，它应该编译

何时使用JSX。Element vs ReactNode vs ReactElement?

包含更多关于JSX元素和react元素类型的信息