如何在TypeScript中根据给定数字显示对应数量的图标

先给你理清楚现有代码的问题：

• 错误地把<MdStar />组件传给了displayIcon函数，但这个函数应该接收数字而非组件
• 函数里的random变量、number.length === random的判断完全和需求无关，没有实现生成对应数量图标的逻辑

下面是几种正确的实现方式：

方法一：用Array.from快速生成（推荐） #

利用Array.from创建指定长度的数组，再通过map渲染图标组件：

import { MdStar } from 'react-icons/md';

// 传入数字count，返回对应数量的图标数组
const displayIcons = (count: number) => {
  // 生成长度为count的数组，每个元素对应一个MdStar组件，用index做key避免React警告
  return Array.from({ length: count }, (_, index) => <MdStar key={index} />);
};

// 在你的React组件中使用
const YourComponent = () => {
  const targetCount = 3; // 这里替换成你需要的数字
  return <div>{displayIcons(targetCount)}</div>;
};

export default YourComponent;

方法二：用循环生成（适合初学者理解） #

通过for循环逐个添加图标组件到数组：

import { MdStar } from 'react-icons/md';

const displayIcons = (count: number) => {
  const iconList: React.ReactNode[] = [];
  for (let i = 0; i < count; i++) {
    iconList.push(<MdStar key={i} />);
  }
  return iconList;
};

// 组件中使用方式同上

额外：添加容错处理 #

如果传入的数字可能是负数、小数或非有效数字，可以增加容错，确保只渲染正整数数量的图标：

const displayIcons = (count: number) => {
  // 把输入转为不小于0的整数
  const validCount = Math.max(0, Math.floor(count));
  return Array.from({ length: validCount }, (_, index) => <MdStar key={index} />);
};

内容的提问来源于stack exchange，提问作者Emmanuel uzoezie