React TypeScript ：（属性：OwnProps）=>“元素”不可分配给“ FunctionComponent <{}>”类型

Question

作为JSX元素，一切都很好...

interface OwnProps {
  children: JSX.Element;
  location: Location;
}

export function Layout(props: OwnProps): JSX.Element {

将其更改为功能组件时，在Layout上出现错误

interface OwnProps {
  children: JSX.Element;
  location: Location;
}

const Layout: React.FC = (props: OwnProps) => {

错误是

Type '(props: OwnProps) => Element' is not assignable to type 'FunctionComponent<{}>'.
  Types of parameters 'props' and 'props' are incompatible.
    Property 'location' is missing in type '{ children?: ReactNode; }' but required in type 'OwnProps'.ts(2322)
layout.tsx(18, 3): 'location' is declared here.

Answer 1

React.FC实际上是通用类型。您需要指定道具类型

const Layout: React.FC<OwnProps> = (props: OwnProps) => {}