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']}
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…