Блог

Я начинаю с React и Typescript, и мой редактор кода заявляет о моем компоненте кнопки (ошибка ниже), но 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) => 
 

Что не так в моем коде?

Обнаружена проблема, должно быть:

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

Я забыл Props включить React.FunctionComponent