时间戳

首页 > 解决方案 > 如何在 Typescript 中编写 React 无状态功能组件？

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

问题描述

我有这个：

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) => Element[]' 不可分配给类型 'FunctionComponent'。类型“元素[]”缺少类型“ReactElement ReactElement 组件”中的以下属性）> | 空） | (new (props: any) => Component)>': type, props, key

标签： reactjstypescriptcreate-react-app

解决方案

问题是您试图在 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>
)

推荐阅读