Как написать функциональный компонент React без состояния в Typescript?

Question

У меня есть это:

import React, { useReducer } from 'react';
import { Item, List } from '../Types';

type Props = {
    items: List;
};

const TodoList: React.SFC<Props> = ({ items, children }) => {
    return items.map((item: Item) => <div key={item.id}>{item.id}</div>);
};

export default TodoList;

Я продолжаю получать:

Тип '({items, children}: PropsWithChildren) => Элемент []' не назначаетсявведите «FunctionComponent». Типу «Элемент []» не хватает следующих свойств из типа «Компонент ReactElement ReactElement)> |ноль) |(новый (реквизиты: любой) => Компонент)> ': тип, реквизиты, ключ

Answer 1

Проблема в том, что вы пытаетесь вернуть массив элементов в вашем JSX. В React вы можете вернуть только один родительский элемент, который затем должен обернуть остальные ваши элементы. Поэтому попробуйте изменить

return items.map((item: Item) => <div key={item.id}>{item.id}</div>);

на

return (
    <div>
        {items.map((item: Item) => <div key={item.id}>{item.id}</div>)}
    </div>
)

. Если вы не хотите иметь лишних div, вы также можете заключить элементы списка в Фрагмент * 1009. *. В этом случае вы должны сделать:

return (
    <React.Fragment>
        {items.map((item: Item) => <div key={item.id}>{item.id}</div>)}
    </React.Fragment>
)

Answer 2

Это определение типа SFC: ожидается, что вы вернете ReactElement или null, а вы возвращаете Element[].

type SFC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement | null;
  ...
}

Вы можете использовать Реагироватьфрагменты :

const TodoList: React.SFC<Props> = ({ items, children }) => {
  return (
    <>
      {items.map((item: Item) => (
        <div key={item.id}>{item.id}</div>
      ))}
    </>
  );
};