React TS项目中.map索引作为HTML id的类型适配问题

直接把数组索引i转换为字符串即可，因为HTML的id属性要求是字符串类型，而map返回的索引是数字类型，导致TS类型校验报错。有两种简单的转换方式：

方式一：使用toString()方法 #

const cities = city.map((town, i) => {
  return <Link 
    className={`citiy ${props.dark ? 'dark' : ''}`}
    to='/home' 
    onClick={handleFetch} 
    key={nanoid()} 
    id={i.toString()}>
      {town}
  </Link>
})

方式二：使用模板字符串 #

const cities = city.map((town, i) => {
  return <Link 
    className={`citiy ${props.dark ? 'dark' : ''}`}
    to='/home' 
    onClick={handleFetch} 
    key={nanoid()} 
    id={`${i}`}>
      {town}
  </Link>
})

额外说明：用数组索引作为id虽能解决当前类型问题，但如果数组元素顺序变动，会导致DOM元素的id不稳定。如果你的城市数据自带唯一标识（比如每个城市专属的id字段），更推荐用这个唯一值作为id属性，既符合类型要求，也更健壮。

内容的提问来源于stack exchange，提问作者Isa Seferović