reactjs - JSX.Element' 不可分配给类型 'FunctionComponent<{}>'

Question

我从 React 和 Typescript 开始，我的代码编辑器声称我的 Button 组件(错误如下)，但对于 eslint 似乎没问题。

import React from 'react'

interface Props {
  children: React.ReactChild | React.ReactChildren
}

const Button: React.FunctionComponent = ({ children }: Props) => {
  return <button>{children}</button>
}

export default Button

错误:

Type '({ children }: Props) => JSX.Element' is not assignable to type 'FunctionComponent<{}>'.
  Types of parameters '__0' and 'props' are incompatible.
    Type '{ children?: ReactNode; }' is not assignable to type 'Props'.
      Types of property 'children' are incompatible.
        Type 'ReactNode' is not assignable to type 'string | number | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ReactChildren'.
          Type 'undefined' is not assignable to type 'string | number | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => 

我的代码有什么问题？

Answer 1

发现问题，应该是:

const Button: React.FunctionComponent<Props> = ({ children }: Props) => (
  <button>{children}</button>
)

我忘记了 React.FunctionComponent 上的 Props