Предисловие
Однажды мне понадобилось написать гибкий на типизацию компонент в React. Мне нужно было, чтобы в зависимости от одного пропса в виде массива элементов, менялся другой пропс, а точнее аргумент рендер функции, которую я тоже должен передавать в качестве пропса. В обычных функциях тс, я бы подобную проблему решил через дженерики, и поэтому у меня появилась идея написать компонент дженерик.
Базовые понятия
Прежде чем написать свой первый компонент-дженерик, нужно понять и научиться писать обычные Тайпскрипт Дженерики.
Для чего вообще нужны дженерики? Они нужны для того, чтобы мы могли использовать наши конструкции кода не только с заранее заданными типами, но и иметь вариативность.
Проще написать, к сожалению, не получилось, поэтому предлагаю разобраться на примере.
Давайте представим, что у нас есть какая-то функция, которая имитирует запрос к серверу и отдает нам значение в виде обертки над нашим аргументом.
function request(arg: string) {
return {
status: 200,
data: arg
}
}По коду выше наша функция будет иметь тип
function request(arg: string): {
status: number;
data: string;
}Все, что написано выше - это, конечно, здорово, но давайте представим, что мы хотим работать с этой фукнцией не только с аргументом строкой.
Есть 3 варианта...
Использовать тип unknown или any
interface Response {
status: number;
data: unknown;
}
function request(arg: unknown): Response {
return {
status: 200,
data: arg
}
}Написать еще одну функцию которая работает с числами
function request(arg: number) {
return {
status: 200,
data: arg
}
}И конечно же использовать дженерик
function request<T>(arg: T) {
return {
status: 200,
data: arg
}
}Что нам даст использование дженерика
function request<T>(arg: T) {
return {
status: 200,
data: arg
}
}
// Если мы вызовем request с числом
request(100)
// То request будет иметь тип
function request<number>(arg: number): {
status: number;
data: number;
}
// А если со строкой
request('100');
// То
function request<string>(arg: string): {
status: number;
data: string;
}Если хотите более подробно познакомиться с дженериками, можете посмотреть документацию
Как пишутся компоненты-дженерики
Классовые:
class CustomComponent<T> extends React.Component<T> {
// ...
}Функциональные:
function CustomComponent<T> (props: React.PropsWithChildren<T>): React.ReactElement{
// ...
}const CustomComponent = <T, >(props: React.PropsWithChildren<T>: React.ReactElement => {
// ...
}Какие задачи решают
Давайте рассмотрим полезность на простом примере
interface CustomComponentProps<T> {
data: T[]
onClick: (element: T) => void;
}
class CustomComponent<T> extends React.Component<CustomComponentProps<T>> {
render() {
return (
<div>
<h1>Список</h1>
<ul>
{
this.props.data.map((element) => (
<li onClick={() => this.props.onClick(element)}></li>
))
}
</ul>
</div>
)
}
}Что же нам даст использование этого компонента на деле
const AnotherCustomComponent: React.FC = () => {
const data = ['text', 'text', 'text'];
return (
<div>
<CustomComponent data={data} onClick={/* */} />
</div>
)
}в примере выше CustomComponent будет ожидать в onClick функцию (element: string) => void так как в data был передан массив строк
Теперь давайте рассмотрим пример, где в качестве data у нас будет не массив примитивов, а массив сущностей
class User {
constructor(
public name: string,
public lastName: string
){}
get fullName() {
return `${this.name} ${this.lastName}`
}
}
const AnotherCustomComponent: React.FC = () => {
const data = [
new User('Джон', 'Сина'),
new User('Дуэйн', 'Джонсон'),
new User('Дейв', 'Батиста'),
];
return (
<div>
{/* в он клик нам не придется ручками подставлять тип.
Как в примере выше, он сам выведется из того, что было передано в data */}
<CustomComponent data={data} onClick={(user) => alert(user.fullName)} />
</div>
)
}теперь функция onClick будет иметь тип (element: User) => void
Давайте рассмотрим немного другой пример
interface CustomComponentProps<T> {
data: T[]
onClick: (element: T) => void;
// делаем children рендер функцией для элемента списка
children: (element: T) => React.ReactElement
}
class CustomComponent<T> extends React.Component<CustomComponentProps<T>> {
render() {
return (
<div>
<h1>Список</h1>
<ul>
{
this.props.data.map((element) => (
<li onClick={() => this.props.onClick(element)}>{this.props.children(element)}</li>
))
}
</ul>
</div>
)
}
}
class User {
constructor(
public name: string,
public lastName: string
){}
get fullName() {
return `${this.name} ${this.lastName}`
}
}
const AnotherCustomComponent: React.FC = () => {
const data = [
new User('Джон', 'Сина'),
new User('Дуэйн', 'Джонсон'),
new User('Дейв', 'Батиста'),
];
return (
<div>
<CustomComponent data={data} onClick={(user) => alert(user)}>
{
// тут тип как в onClick тоже высчитается
(user) => {
return <div>Пользователь: {user.fullName}</div>
}
}
</CustomComponent>
</div>
)
}Так как мы в data передавали массив юзеров children будет иметь тип (element: User) => React.ReactElement
По аналогии с дженериками-функциями в дженерики-компоненты можно явно определить нужный тип, с которым мы бы хотели работать, но такой синтаксис я редко использую
Пример валидного кода:
const AnotherCustomComponent: React.FC = () => {
const data = [
new User('Джон', 'Сина'),
new User('Дуэйн', 'Джонсон'),
new User('Дейв', 'Батиста'),
];
return (
<div>
{/* тут мы явно задаем что мы хотим работать с юзером */}
<CustomComponent<User>
data={data}
onClick={(user) => alert(user)}
>
{
// тут тип как в onClick тоже высчитается
(user) => {
return <div>Пользователь: {user.fullName}</div>
}
}
</CustomComponent>
</div>
)
}Пример не валидного кода:
const AnotherCustomComponent: React.FC = () => {
const data = [
new User('Джон', 'Сина'),
new User('Дуэйн', 'Джонсон'),
new User('Дейв', 'Батиста'),
];
return (
<div>
{/* тут мы явно задаем что мы хотим работать со строкой
и при передаче в data массив юзеров будет ошибка */}
<CustomComponent<string>
data={data}
onClick={(user) => alert(user)}
>
{
(user) => {
return <div>Пользователь: {user.fullName}</div>
}
}
</CustomComponent>
</div>
)
}
Полезность на личном опыте
Реальные примеры из жизни не стал прикладывать, так как мои компоненты довольно жирненькие, поэтому решил показать полезность на псевдо примерах, но в качестве бонуса решил словами описать последнюю проблему, которую решил через компонент-дженерик.
Мне нужно было сделать списки для товаров и категорий, которые можно было драг-н-дропать, для изменения порядка отображения, и функционал у этих двух списков идентичен, кроме отображения. Я написал один компонент, который мог работать с драг-н-дропом, у него был пропс children который являлся рендер функцией для элемента, что мне и позволило менять отображение списка при одинаковом функционале.
Заключение
В заключении хотелось бы сказать, что компоненты-дженерики хоть и довольно нишевы, но бывают очень полезны. Надеюсь моя статья будет очень полезна и поможет вам написать свой первый компонент-дженерик.
