TypeScript React SFC子道具類型錯誤

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的簡寫中