Typescript:как установить тип детей в компоненте React?
могу ли я установить тип детей в TypeScript?
например у меня есть такие компоненты
class UserProfile extends React.Component<{ id: number }, void>{
}
class Thumbnail extends React.Component<{ children: UserProfile[] }, void>{
}
class UsersList extends React.Component<void, void>{
public render() {
return (
<div>
<Thumbnail><UserProfile id={1} /></Thumbnail>
<Thumbnail><UserProfile id={2} /></Thumbnail>
</div>
)
}
}
Я хочу определить, какие конкретные дети поддерживаются в компоненте миниатюр, чтобы избежать такой ситуации:
class UsersList extends React.Component<void, void>{
public render() {
return (
<div>
<Thumbnail><UserProfile id={1} /></Thumbnail>
<Thumbnail><UserProfile id={2} /></Thumbnail>
<Thumbnail><span>Some plain text</span></Thumbnail> // This should be forbidden because Thumbnail component expects to have an array of UserProfile elements as it can handle them
</div>
)
}
}
этот пример не работает, но есть ли способ сделать это?
1 ответов
установить тип детей в компоненте React?
не может быть сужен аннотацией типа (его все JSX.Элемент.) Можно сделать с помощью runtime introspection (type
свойство каждого ребенка).