Чем заменить React.FunctionComponent?

Question

[Nayro TV]

С 18 версии React.FunctionComponent убрали, а чем тогда заменить?

import React { FC } from 'react'
import { IUser } from "../types/types"

interface UserListProps {
  users: IUser[]
}
const UserList: FC<UserListProps> = ({users}) => {
  return (
    <div>
      {users.map(user => 
          <div key={user.id} style={{padding: 15, border: '1px solid aqua'}}>
            {user.id}. {user.name} проживает в городе {user.address.city} на улице {user.address.street}
          </div>
      )}
    </div>
  )
}

export default UserList

Comments

[Дмитрий Беляев]

А Вы не пробовали для начала ошибки синтаксиса исправить?
Ну и вообще читать вывод ошибок?

Answer 1

[Алексей]

"Чем заменить React.FunctionComponent?" - ничем, так и использовать интерфейс FunctionComponent или тип FC.

В конкретном коде проблема из-за отсутствия запятой в импорте, а не в типизации.

Единственное, на будущее в 18й версии убрали children из FunctionComponent, поэтому при использовании children нужно его явно указывать в типизации пропов.

Comments

[strelok011]

алсо стоит отделять импорты типов в отдельную строку, и писать
import React from 'react'; (кстати оно уже не надо)
import type { FC } from 'react';

[Алексей]

strelok011, нет не стоит. Дубликация импортов это плохо, именно поэтому в 4.5 добавили type модификатор к именованным импортам.
Тыц

[strelok011]

1. это не дубликация импортов, т.к. импортирование типа не ведет к дублированию импортированного исполняемого модуля
2. читабельность кода ухудшается.
Вижу больше плюсов чем минусов, хоть и написано "This works, but it would be nice to avoid two import statements for the same module."

[Алексей]

strelok011, 1. прекрасно понятно, что я пишу о дублировании в коде, а не о выполнении этого кода.
2. а я говорю, что ухудшает читаемость дублирование импортов. кто прав, давайте опрос проведем? так его уже проводили, поэтому в 4.5 и появились такие изменения.
смысла тут вообще нет спорить, т.к. какие правила линтера будут настроены на проекте, по тем и будем писать, только настраивают их обычно по общим рекомендациям, а не субъективным.

[strelok011]

1 - ну, придет падаван, с чего он это поймет?
2. да на здоровье собственно ) работая в большой распределенной команде убедился, что такими мелочами пренебрегать не стоит. Опрос - вообще не репрезентативен. Опытным оно не надо, неопытные не поймут.
3. Ну, я например на проектах линтеры настраиваю, вот и выбираю что и как. Общие рекомендации не золотая пуля как бы.
Дальше обсуждение не имеет смысла, у каждой марфушки свои игрушки. Суть только в том что категорическими заявами в таких местах лучше не кидаться.