如何提取依赖map索引值的重复动画样式为const常量？

当然可以！你遇到的问题是因为直接定义常量时，i只存在于map的回调函数作用域里，没法在外部直接引用。解决办法很简单——把动画字符串的生成逻辑封装成一个接收索引参数的函数就行，具体看下面的示例：

1. 定义生成动画字符串的函数 #

把原本的动画值逻辑封装成一个函数，接收循环索引作为参数：

const getFadeAnimation = (index) => `fade-animation 12s linear ${index * 3}s infinite`;

2. 在map循环中调用函数 #

在两个map的回调里，传入当前循环的i来获取对应的动画值：

{actions.map((action, i) => (
  <Component style={{ animation: getFadeAnimation(i) }}>{action}</Component>
))}

{figures.map((figure, i) => (
  <Component style={{ animation: getFadeAnimation(i) }}>{figure}</Component>
))}

为什么这种写法可行？ #

• 函数getFadeAnimation会在每次map循环时被调用，此时传入的i是当前循环的有效索引，能正确计算延迟时间
• 把重复的动画逻辑抽离后，后续如果要修改动画时长、延迟规则或者动画名称，只需要修改这一个函数即可，不用在多个map里逐一修改，维护性更强

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