Using typescript in react，stateless component not assignable to type 'React.SFC'

Question

TypeScript: 2.8.3
@types/react: 16.3.14

The type of return in function component is JSX.Element, when I declare the component to React.SFC(alias of React.StatelessComponent).

There are three errors occured：

TS2322: Type 'Element' is not assignable to type 'StatelessComponent<{}>', Type 'Element' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any>'
TS2339: Property 'propTypes' does not exist on type '(props: LayoutProps) => StatelessComponent<{}>'
TS2339: Property 'defaultProps' does not exist on type '(props: LayoutProps) => StatelessComponent<{}>'

interface ItemInterface {
  name: string,
  href: string,
  i18n?: string[]
}

interface LayoutHeaderItemProps extends ItemInterface{
  lang: string,
  activeHref: string,
}
function LayoutHeaderItem (props: LayoutHeaderItemProps): React.SFC{
  const {name, href, lang, activeHref, i18n} = props
  const hrefLang = /\//.test(href) ? `/${lang}` : ''
  if (!i18n.includes(lang)) return null
  return (
    <a
      className={`item${href === activeHref ? ' active' : ''}`}
      key={href}
      href={hrefLang + href}
    ><span>{name}</span></a>
  )
}

LayoutHeaderItem.propTypes = {
  lang: string,
  activeHref: string,
  name: string,
  href: string,
  i18n: array
}
LayoutHeaderItem.defaultProps = {i18n: ['cn', 'en']}

The return type is not a component, the function itself is component. const LayoutHeaderItem: React.SFC<LayoutHeaderItemProps> = (props: LayoutHeaderItemProps) => { ... } — Aleksey L.
– Aleksey L., Commented May 21, 2018 at 5:41
@AlekseyL. Is there a particular reason why a lot of people don't write answers as answers but as a comment? I'm really curious because I see that a lot on stackoverflow — ysfaran
– ysfaran, Commented May 8, 2019 at 15:34
@Truntle no particular reason. Sometimes questions need clarification. Posted as an answer :) — Aleksey L.
– Aleksey L., Commented May 8, 2019 at 16:03

Aleksey L. · Accepted Answer · 2020-07-02 11:27:01Z

17

The return type is not a component, the function itself is a component:

const LayoutHeaderItem: React.SFC<LayoutHeaderItemProps> =
    (props: LayoutHeaderItemProps) => { 
        // ... 
    }

This question is a bit old, SFC deprecated in favor of FunctionComponent with a FC alias

const LayoutHeaderItem: React.FC<LayoutHeaderItemProps> =
    (props: LayoutHeaderItemProps) => { 
        // ... 
    }

edited Jul 2, 2020 at 11:27

answered May 8, 2019 at 15:59

Aleksey L.

38.4k11 gold badges86 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael R Over a year ago

In order to use React.StatelessComponent must ES6 Arrow Function Syntax be used? I was hoping to use function() {} function declaration syntax too.

Aleksey L. Over a year ago

@MichaelR you can't use it with function as is. Relevant suggestion here. If you really have to use a function you'll need to type parameters and return type separately (Parameters and ReturnType helpers can be used)

Collectives™ on Stack Overflow

Using typescript in react，stateless component not assignable to type 'React.SFC'

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related