React.Js - Typescript 如何将对象数组作为道具传递？

Question

每个人。

所以我正在用 React.Js 学习 TypeScript，但我遇到了一个问题。

我有一个“页面”，其中包含一系列对象，其中包含有关每个用户的更多信息

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'}
    ];

现在，我有一个用户页面，它呈现所有用户的列表，该列表是由 UsersListItem 组件组成的组件，现在该组件呈现 USERS 数组内每个对象的所有数据。我知道如何从 USERS 数组传递一个对象，但我想发送包含所有对象的整个数组

所以问题是如何将 USERS 数组传递到 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  
            user={USERS[0].name} 
            id={USERS[0].id} 
            image={USERS[0].image} 
            placeName={USERS[0].places} 
            placeCount={USERS[0].placeCount}/>
     
      )
}

export default User

这是我的 UsersList 组件

import UsersListProps from './props/props_UserItem';
import UserIListtem from './UserIListtem';



const UsersList = ( props : UsersListProps) =>{

    const {user, id, image, placeCount, placeName} = props

    if(props === null){
        return(
            <div>
                <h1>No users found</h1>
            </div>
        );
    }

    return(
        <ul>
            {
                <UserIListtem 
                    user={user} 
                    id={id} 
                    image={image} 
                    placeName={placeName} 
                    placeCount={placeCount}/> 
            }
        </ul>
    );
  
}

这是我的 UsersListItem 组件

import UsersListProps from './props/props_UserItem';

const UserIListtem = (props: UsersListProps) => {
    const {user, id, image, placeCount, placeName} = props;
  return (
    <li>
    <div>

        <div>
            <img src={image} alt={placeName}/>
        </div>
        <div>{id}
            <h2>{user}</h2>
            <h3>{placeCount}</h3>
        </div>
    </div>

</li>
  )
}

export default UserIListtem

这是我的 UsersListProps 道具，我已将其放入名为 props_UserItem.tsx 的单独文件中

interface UsersListProps {
    user: string,
    id: number,
    image: string,
    placeCount: number,
    placeName: string

}

export default UsersListProps

Answer 1

您可以简单地在组件中返回它User：

return (
 <UsersList users={USERS} />
)

那么该UsersList组件将变成：

const UsersList = ( { users } : UsersListProps) => {
 if(!users?.length){
   return(
     <div>
       <h1>No users found</h1>
     </div>
   );
 }
 return(
  <ul>
   {users.map(({ id, name, image, places, placeCount }) => (
     <UserIListtem
      key={id} 
      name={name} 
      id={id} 
      image={image} 
      places={places} 
      placeCount={placeCount}/> 
   ))}
  </ul>
 );
}

和UserIListtem组件：

const UserIListtem = ({ name: user, id, image, placeCount, places: placeName }: User) => {
 return (
  <li>
   <div>
    <div>
     <img src={image} alt={placeName}/>
    </div>
    <div>{id}
     <h2>{user}</h2>
     <h3>{placeCount}</h3>
     </div>
   </div>
  </li>
 )
}

请记住还将UsersListProps界面更改为：

export interface UsersListProps {
 users: User[];
}

export interface User {
 id: number;
 name: string;
 image: string;
 placeCount: number;
 places: string;
}