8
Posso impostare il tipo di bambini in TypeScript?Typescript: come impostare il tipo di child in React Component?
Per esempio io ho tali Componenti
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>
)
}
}
voglio definire cosa particolare i bambini sono supportati in Miniatura componente al fine di evitare tale situazione:
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>
)
}
}
Questo esempio non funziona, ma c'è un modo per farlo?
Ho cercato un modo per farlo e non penso che sia possibile. JSX emette elementi, non i tipi di classe del componente. Quello che puoi fare è ispezionare i 'bambini' nella tua funzione di rendering e controllare il' tipo', e lanciare un errore se non è quello che vuoi. – Aaron