React映射与Props命名疑问：未声明变量为何生效？

问题1：代码中item={item}里的item未声明，为何能关联到todosData中的数据？ #

你看到的item={item}里的两个item是不同的角色，本质和map函数的迭代逻辑绑定：

• 箭头函数里的第一个item是map回调的参数：在App组件的todosData.map(item => ...)中，map会遍历todosData数组的每一项，每次迭代时把当前数组元素赋值给这个item变量——这个变量是回调函数的局部变量，只在当前迭代的作用域内有效。
• 等号右边的item就是上述局部变量，代表当前遍历到的todosData里的单个对象（比如{id:1, text:"Take out the trash", ...}）。
• 等号左边的item是你给子组件TodoItem定义的props属性名，意思是把当前遍历到的数组元素，以名为item的props传递给TodoItem。

所以TodoItem组件里的props.item，就是父组件迭代时传过来的todosData里的单个对象，并不是“未声明”，只是声明在map的回调参数里了。

问题2：为何在Product组件中可以用product替代item作为Props的属性名？ #

Props的属性名是完全自定义的，核心规则只有一个：父组件传递时的属性名，要和子组件接收时的属性名一致：

• 在TodoItem的场景中，父组件传的是item={item}，所以子组件用props.item来获取值；
• 在Product组件中，只要父组件传递时用的是product={某产品对象}（比如类似productsData.map(product => <Product product={product}/>)），那子组件就可以用props.product来接收。

这种命名差异只是为了语义化：处理待办项用item更直观，处理产品数据用product更清晰，本质都是开发者根据业务场景自定义的props键名，只要保持“传”和“接”的键名统一就行。

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