reactjs - 如何在 Typescript 中编写 React 无状态功能组件？

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;

我不断得到:

Type '({ items, children }: PropsWithChildren) => Element[]' is not assignable to type 'FunctionComponent'. Type 'Element[]' is missing the following properties from type 'ReactElement ReactElement Component)> | null) | (new (props: any) => Component)>': type, props, key

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，您也可以用Fragment 包裹您的列表项。 .在这种情况下，你会这样做:

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