React.js+TypeScript如何将对象数组作为props传递给子组件

1. 修正类型定义 #

首先修改props_UserItem.tsx中的类型定义，拆分单用户数据结构、列表组件Props、列表项组件Props三类类型，避免重复定义：

// 单条用户数据结构
export interface User {
  name: string;
  id: number;
  placeCount: number;
  places: string;
  image: string;
}

// UsersList 列表组件接收的Props：传入完整用户数组
export interface UsersListProps {
  items: User[];
}

// UsersListItem 单条用户项组件接收的Props：传入单个用户对象
export interface UsersListItemProps {
  user: User;
}

2. 路由页传参调整 #

修改/users路由页的返回逻辑，不再传递单个用户的零散属性，直接将整个USERS数组作为items属性传入UsersList组件：

import UsersList from '../components/UsersList';

function User() {
  const USERS = [
    {name: 'Nicole', id: 1, placeCount: 10, places: 'place 1', image: 'image source'},
    {name: 'Sarah', id: 2, placeCount: 20, places: 'place 3', image: 'asdasd'}
  ];

  return <UsersList items={USERS} />
}

export default User

3. UsersList 列表组件调整 #

在列表组件中解构出传入的用户数组，判断数组长度决定是否展示空状态，通过map方法遍历数组渲染所有用户项，遍历时给每个列表项传入唯一key：

import { UsersListProps } from './props/props_UserItem';
import UsersListItem from './UsersListItem';
// 注：原代码中组件名UserIListtem存在拼写笔误，此处修正为规范命名UsersListItem，若保留原文件名同步修改导入名即可

const UsersList = (props: UsersListProps) => {
  const { items } = props;

  // 用户数组为空时展示空提示
  if (items.length === 0) {
    return (
      <div>
        <h1>No users found</h1>
      </div>
    );
  }

  return (
    <ul>
      {items.map(user => (
        <UsersListItem key={user.id} user={user} />
      ))}
    </ul>
  );
}

export default UsersList;

4. UsersListItem 列表项组件调整 #

列表项组件直接接收单个用户对象，从对象中解构取值渲染即可，无需再接收零散属性：

import { UsersListItemProps } from './props/props_UserItem';

const UsersListItem = (props: UsersListItemProps) => {
  const { user } = props;
  return (
    <li>
      <div>
        <div>
          <img src={user.image} alt={user.places} />
        </div>
        <div>
          {user.id}
          <h2>{user.name}</h2>
          <h3>{user.placeCount}</h3>
        </div>
      </div>
    </li>
  )
}

export default UsersListItem;

实现注意事项 #

• 列表遍历必须传入唯一key属性，优先使用数据本身的唯一标识（如用户id），不要使用数组索引作为key，避免列表更新时出现渲染异常。
• 原代码中props === null的判断逻辑无效，React组件的props始终为对象类型，空状态判断需要基于传入的业务数据（此处为用户数组长度）实现。
• 公共类型抽离后，后续如果需要增减用户字段，只需要修改User接口定义即可，无需在多个组件中重复调整类型，维护成本更低。

内容的提问来源于stack exchange，提问作者Filip Studený