在React开发中，遍历数组生成多个同类组件是非常常见的需求，比如渲染商品列表、用户列表等场景，此时正确传递Props是保证子组件能获取到正确数据、正常渲染的核心。很多开发者在初次接触这种场景时，容易犯Props传递格式错误、遗漏key属性或者数据传递不完整的问题。
数组映射传递Props的基础规则
在数组的map方法中生成子组件时，传递Props的本质是将数组项的属性、自定义属性作为子组件的属性传入，同时必须给每个生成的子组件添加唯一的key属性，这是React识别列表元素变化的必要要求。
基础的传递方式是将数组项的所有属性展开传入，或者按需传入需要的属性，示例如下：
// 父组件
import React from 'react';
import UserCard from './UserCard';
const userList = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 }
];
function UserList() {
return (
<div className="user-list">
{userList.map(user => (
// 传递user的所有属性，同时添加key
<UserCard key={user.id} {...user} />
))}
</div>
);
}
export default UserList;
上面的示例中，{...user}会将user对象的所有可枚举属性作为Props传递给UserCard组件，子组件可以通过props.name、props.age等获取对应数据。
按需传递Props的正确方式
如果子组件只需要数组项的部分属性，不需要全部传入，可以显式指定要传递的属性，避免多余数据传入子组件：
// 父组件按需传递属性
function UserList() {
return (
<div className="user-list">
{userList.map(user => (
<UserCard
key={user.id}
userName={user.name}
userAge={user.age}
/>
))}
</div>
);
}
对应的子组件UserCard接收Props的代码如下：
// 子组件UserCard
import React from 'react';
function UserCard(props) {
return (
<div className="user-card">
<p>姓名：{props.userName}</p>
<p>年龄：{props.userAge}</p>
</div>
);
}
export default UserCard;
传递额外自定义Props的方法
除了传递数组项本身的属性，很多时候还需要给子组件传递父组件自定义的属性，比如点击事件处理函数、公共配置等，此时只需要在子组件标签上直接添加对应属性即可：
// 父组件传递自定义Props
function UserList() {
// 自定义的点击处理函数
const handleUserClick = (userId) => {
console.log('点击的用户ID是：', userId);
};
return (
<div className="user-list">
{userList.map(user => (
<UserCard
key={user.id}
{...user}
// 传递自定义点击事件，将用户id传入回调
onUserClick={() => handleUserClick(user.id)}
// 传递公共属性
theme="light"
/>
))}
</div>
);
}
子组件中可以通过props.onUserClick和props.theme获取这两个自定义属性：
// 子组件接收自定义Props
function UserCard(props) {
return (
<div
className={`user-card theme-${props.theme}`}
onClick={props.onUserClick}
>
<p>姓名：{props.name}</p>
<p>年龄：{props.age}</p>
</div>
);
}
常见错误及避坑指南
- 遗漏key属性：React要求列表渲染的每个子组件必须有唯一的key，不能使用数组索引作为key（除非列表是静态的、不会增删改），最好使用数据的唯一id作为key。
- 错误展开Props：不要在
map的回调函数中直接返回对象展开，比如{userList.map(user => {...user})}，这种写法不会生成组件，需要将属性绑定到组件标签上。 - Props类型不匹配：如果传递的Props是函数或者复杂类型，要注意子组件接收时的类型校验，可以使用PropTypes或者TypeScript的接口定义来约束Props类型，避免运行时错误。
- 直接修改Props：React的Props是只读的，子组件中不要尝试修改接收到的Props，如果需要修改数据，应该通过回调函数将数据传回父组件，由父组件修改后重新传递。
使用TypeScript的规范写法
如果项目使用TypeScript，建议先定义子组件的Props接口，明确每个Props的类型，提升代码的可维护性：
// 定义子组件Props接口
interface UserCardProps {
id: number;
name: string;
age: number;
onUserClick: () => void;
theme: string;
}
// 子组件使用接口约束Props
function UserCard(props: UserCardProps) {
return (
<div
className={`user-card theme-${props.theme}`}
onClick={props.onUserClick}
>
<p>姓名：{props.name}</p>
<p>年龄：{props.age}</p>
</div>
);
}
父组件传递Props时，TypeScript会自动校验传递的属性是否符合接口定义，缺少必填属性或者类型不匹配时会在编译阶段报错，减少运行时问题。