我對打字稿很陌生，我試圖將我在 Reactjs 上的組件遷移到打字稿。這個組件應該接收一個 0-10 的數字作為道具，并根據這個數字填充一個帶有星星組件的陣列，這些星星組件是我從 React 圖示匯入的圖示。一旦陣列被填充，然后由組件呈現。但是當我嘗試將這些元素推送到 Array 打字稿時會拋出一個錯誤，就好像這些元素不是 Element 型別，也不是 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, any>' 缺少來自型別 'Element' 的以下屬性：attributes、classList、className、clientHeight 和 123 more.ts(2345)
我真的很感激這里的一些幫助，謝謝！
uj5u.com熱心網友回復：
所以編譯器說這<BsStarFill />是一個 JSX.Element。但是您已將陣列和星形陣列宣告為Element[]不同型別
let starsArray: JSX.Element[] = [];
const [array, setArray] = useState<JSX.Element[]>([]);
將這些更改為正確的型別，它應該編譯
什么時候使用 JSX.Element、ReactNode 和 ReactElement？
這包含有關 jsx 元素和 react 元素型別的更多資訊
uj5u.com熱心網友回復：
更新：嘗試不同的解決方案后，我發現自己通過將 array 和 StarsArray 設定為 ReactNodes 型別的陣列來修復錯誤；
星陣：ReactNode[] = [];
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/317161.html