Каждый.
Итак, я изучаю TypeScript с React.Js и столкнулся с проблемой.
У меня есть "страница" с массивом объектов, которые содержат дополнительную информацию о каждом пользователе.
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
Вы можете просто заменить реквизиты пользователями: Массив, а затем отправить весь массив и загрузить данные оттуда в свой UserIListtem.
Вы можете просто вернуть это в компоненте 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;
}