Заметки про React
Ссылка
нажмите — покажем
нажмите — покажем
Чистый код React с TypeScript
В своей статье Робин Везер объясняет, как правильно типизировать компоненты React, использовать встроенные типы React, обрабатывать пропсы и дочерние элементы, управлять стейтом с помощью хуков, работать с рефами и обрабатывать события.
Несколько примеров, которые привел автор статьи:
✨ Передача компонентов в пропсах. Можно указать требуемые пропсы у передаваемых компонентов, а определить компонент через генерик тип ComponentType:
import { ComponentType } from 'react'
type ProductTileProps = {
title: string
description?: string
}
type Props = {
render: ComponentType<ProductTileProps>
}
function ProductTile({ render }: Props) {
const props = {…}
return render(props)
}
✨ Для определения рефов через пропсы используйте генерик тип RefObject:
import { RefObject } from 'react'
type Props = {
anchor: RefObject<HTMLElement>
}
function Popover({ anchor }: Props) {
// position component according to the anchor ref
}
✨ MouseEvent и React.MouseEvent. MouseEvent - это нативное JavaScript событие, а React.MouseEvent - это синтетическое событие, которое используется в колбеках React. У них много общего, и их часто можно использовать как взаимозаменяемые, но версия React также учитывает несовместимость браузеров и включает некоторые специфичные для React методы, такие как persist().
https://weser.io/blog/clean-react-with-typescript
76 · 3.1K ·