[英]React.Js - Typescript how to pass an array of Objects as props?
everyone.每个人。
So I am learning TypeScript with React.Js and I have come to a problem.所以我正在用 React.Js 学习 TypeScript,我遇到了一个问题。
I have a "page" that has an array of objects that have further information about each 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'}
];
Now, I have a User page that renders list of all users, and this list is a component that is made out of UsersListItem component, now this component renders all data from each object inside the USERS array.现在,我有一个呈现所有用户列表的用户页面,这个列表是一个由 UsersListItem 组件组成的组件,现在这个组件呈现来自 USERS 数组中每个对象的所有数据。 I know how to pass one object from USERS array, but I want to send whole array with all objects
我知道如何从 USERS 数组中传递一个对象,但我想发送包含所有对象的整个数组
So question is how can I pass the USERS array into UsersList ?所以问题是如何将 USERS 数组传递给 UsersList ?
This is my structure这是我的结构
This is my /users page这是我的 /users 页面
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
This is my UsersList component这是我的用户列表组件
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>
);
}
and this is my UsersListItem component这是我的 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
And this is my UsersListProps props that I had put into seperate file called props_UserItem.tsx这是我放入名为 props_UserItem.tsx 的单独文件中的 UsersListProps 道具
interface UsersListProps {
user: string,
id: number,
image: string,
placeCount: number,
placeName: string
}
export default UsersListProps
您可以用 users: Array 替换 props,然后发送整个数组并在 UserIListtem 中从那里加载数据。
You can simply return this in the User
component:您可以简单地在
User
组件中返回它:
return (
<UsersList users={USERS} />
)
Then the UsersList
component will become:那么
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>
);
}
And the UserIListtem
component:和
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>
)
}
Remember to also change the UsersListProps
interface to:请记住还要将
UsersListProps
接口更改为:
export interface UsersListProps {
users: User[];
}
export interface User {
id: number;
name: string;
image: string;
placeCount: number;
places: string;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.