将元素推送到元素数组时出现打字稿错误（2345）（React js）答案

【问题标题】：Typescript error (2345) when pushing element to array of elements(React js)将元素推送到元素数组时出现打字稿错误（2345）（React js）
【发布时间】：2021-12-03 05:19:05
【问题描述】：

我对 Typescript 还是很陌生，我正在尝试将我在 Reactjs 上的一个组件迁移到 typescript。这个组件应该接收一个 0-10 的数字作为道具，并根据该数字填充一个带有 stars 组件的数组，这些组件是我从 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”缺少类型“Element”中的以下属性：attributes、classList、className、clientHeight 和 123 more.ts(2345)

非常感谢您的帮助，谢谢！

【问题讨论】：

标签： arrays reactjs typescript components react-typescript

【解决方案1】：

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

let starsArray: JSX.Element[] = [];

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

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

When to use JSX.Element vs ReactNode vs ReactElement?

这包含有关 jsx 元素和反应元素类型的更多信息

【讨论】：

很好奇，因为我已经尝试过了，错误消息转过来告诉我我不能在 Jsx 数组上设置元素；
“元素”类型的参数不可分配给“JsxElement”类型的参数。类型“ReactElement”缺少类型“JsxElement”的以下属性：kind、openingElement、children、closeingElement 和 25 more.ts(2345)
有趣，它在这里为我工作。 codesandbox.io/s/strange-meninsky-e8z3z?file=/src/App.tsx
我不确定 react-icons 是否与其类型捆绑在一起，但您可以尝试将 @types/react-icons 安装到您的开发依赖项以确保它们是

【解决方案2】：

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

星阵：ReactNode[] = [];

【讨论】：