Question

我定义了以下无状态功能组件：

import { SFC } from "react";

type ProfileTabContentProps = {
  selected: boolean;
};

const ProfileTabContent: SFC<ProfileTabContentProps> = ({ selected, children }) => selected && children;

这无法编译并出现以下错误：

Type '({ selected, children }: ProfileTabContentProps & { children?: ReactNode; }) => ReactNode' is not assignable to type 'StatelessComponent'.
Type 'ReactNode' is not assignable to type 'ReactElement | null'.
Type 'undefined' is not assignable to type 'ReactElement | null'.

快速搜索相关问题都会给出相同的答案，这与我所做的非常相似。我想念什么？

Answer 1

您的问题是selected && children的计算结果为React.ReactNode，如果您检查类型，则为联合类型：

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

但是，React.SFC必须返回ReactElement，该函数定义的定义是：

(props: P & { children?: ReactNode }, context?: any): ReactElement<any> | null;

我认为您已经看到[truthy] && [render me]模式使用了很多，但是通常是在一个较大的TSX组件内部，该组件允许使用React.ReactNode

如果要保持简单，可以这样做：

const ProfileTabContent: SFC<ProfileTabContentProps> = ({ selected, children }) => 
  <>{selected && children}</>

这只是将您的表达式包装在React.ReactFragment的简写中

TypeScript React SFC子道具类型错误

1 个答案: