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）=> Element []'不可分配给'FunctionComponent'类型。类型'Element []'缺少类型'ReactElement ReactElement Component）的以下属性null）| （新（道具：任意）=>组件）>'：类型，道具，键

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>
)

Answer 2

这是ProxyPreserveHost On ProxyPass /iqvoc http://my.website.net/3000 ProxyPassReverse /iqvoc http://my.website.net/3000的类型定义：它期望您在返回https://my.website.net/iqvoc的同时返回SFC或ReactElement。

null

您可以使用React fragments：

Element[]

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

2 个答案: