React中map方法单独提取回调函数及参数自动传递问题

嘿，这事儿其实是JavaScript数组方法的标准特性在起作用，我给你拆解明白～

首先得回忆下Array.prototype.map的工作逻辑：它会遍历数组的每一个元素，自动把当前遍历到的元素、元素的索引、原数组这三个参数传递给你传入的回调函数。不管你是把回调函数直接写在map的括号里，还是单独定义好再传进去，这个规则都不会变。

拿你的两种写法对比来看：

• 第一种内联箭头函数的写法：

const todoItems = todos.map((todo) => <li key={todo.id}> {todo.text} </li> );

这里的(todo) => ...就是map要调用的回调，map每次迭代都会把当前的todo元素传进去，你只是显式地接收了这个参数而已。

• 第二种单独定义函数的写法：

const myFunction = (item) => { 
  return( <Thing key={item.value} label={item.label} value={item.value} /> ); 
}

// 调用时
{ tabs.map(myFunction) }

这里你把myFunction直接传给了map，map在遍历tabs数组的时候，每遇到一个元素就会调用一次myFunction，并且自动把当前元素作为第一个参数传进去——这就是为什么你在myFunction里能拿到item的原因。

补充个小知识点：其实map会给回调传三个参数（当前元素、索引、原数组），只是你只用到了第一个而已。如果你需要用到索引，直接在myFunction里加第二个参数就行，比如：

const myFunction = (item, index) => { 
  return( <Thing key={index} label={item.label} value={item.value} /> ); 
}

最后要划重点：这不是React独有的特性，是JavaScript本身的数组方法行为，哪怕你用map处理普通数组（比如数字数组），参数传递的逻辑也是完全一样的～

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