我有这个：
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'（{项目，子项目}： Props天儿童）=
问题是您试图在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，也可以用片段包装列表项。在这种情况下，您将执行以下操作：
return (
<React.Fragment>
{items.map((item: Item) => <div key={item.id}>{item.id}</div>)}
</React.Fragment>
)
这是SFC的类型定义：当您返回元素[]时，它希望您返回ReactElement或null。
type SFC<P = {}> = FunctionComponent<P>;
interface FunctionComponent<P = {}> {
(props: PropsWithChildren<P>, context?: any): ReactElement | null;
...
}
您可以使用React片段：
const TodoList: React.SFC<Props> = ({ items, children }) => {
return (
<>
{items.map((item: Item) => (
<div key={item.id}>{item.id}</div>
))}
</>
);
};
