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

现在，我有一个User页面，它呈现所有用户的列表，这个列表是由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;
}

Answer 2

您只需将props替换为users:Array，然后发送整个数组并将数据加载到UserIListtem中。