如何在array.map中动态设置marker参数为marker1、marker2等递增命名形式？

你可以利用map方法的第二个参数**索引值（index）**来实现动态匹配marker，具体有两种常用方式：

方式一：将marker存入数组（推荐） #

先把所有marker变量整理到一个数组里，遍历的时候直接通过索引取值：

// 先定义marker数组，顺序对应marker1、marker2、marker3...
const markers = [marker1, marker2, marker3];

{teams.map((team, index) => (
  <pointer
    marker={markers[index]}
    // 必须加key属性，React要求列表元素要有唯一标识
    key={team.id || index}
  />
))}

这种方式逻辑清晰，后续新增marker只需往数组里追加元素即可，更符合前端代码的维护习惯。

方式二：通过字符串拼接动态获取变量 #

如果你的marker变量是全局或挂载在某个对象上的（比如类组件的实例this），可以用方括号语法动态读取：

{teams.map((team, index) => (
  <pointer
    // index从0开始，加1得到1、2、3...的序号
    marker={window[`marker${index + 1}`]}
    // 类组件环境下用 this[`marker${index + 1}`]
    key={team.id || index}
  />
))}

注意：这种方式要确保目标变量确实存在，否则会返回undefined引发问题。

内容的提问来源于stack exchange，提问作者Lucas Caballero