TS2339：屬性 'defaultProps' 不存在於類型 '(props: any) =>DetailedReactHTMLElement<{ className: string; }, HTMLElement>'

Question

我嘗試使用 TypeScript 為無狀態、功能性 React 組件指定默認道具，並具有以下代碼：

import React from 'react'

interface Props {
  readonly sid?: string,
}

const defaultProps: any = {
  sid: '',
}

const ModalBackdrop: React.SFC<Props> = (props: Props): JSX.Element => {
  const { sid } = props

  return (
    <div className={`ModalBackdrop ModalBackdrop_${sid} ModalBackdrop__hide`} />
  )
}

ModalBackdrop.defaultProps = defaultProps

export default ModalBackdrop

當我編譯代碼時，我收到以下錯誤消息：

TS2339: Property 'defaultProps' does not exist on type '(props: any) => DetailedReactHTMLElement<{ className: string; }, HTMLElement>'.

i“wdm”：編譯失敗。

我想念什么？

Answer 1

最后，我找到了以下解決方案，用於為無狀態、功能性 React 組件設置默認屬性。 關鍵行是const propsPrivate: Props = { ...defaultProps, ...props } ：

import React from 'react'

interface Props {
  readonly sid?: string,
}

const defaultProps: any = {
  sid: '',
}

export const ModalBackdrop: React.SFC<Props> = (props: Props): JSX.Element => {
  const propsPrivate: Props = { ...defaultProps, ...props }
  const { sid } = propsPrivate

  return (
    <div className={`ModalBackdrop ModalBackdrop_${sid} ModalBackdrop__hide`} />
  )
}

Answer 2

您可以使用函數表示法而不是 const

import React from 'react'

interface Props {
  sid?: string,
}

const defaultProps: any = {
  sid: '',
}

function ModalBackdrop(props: Props): JSX.Element {
  const { sid } = props

  return (
    <div className={`ModalBackdrop ModalBackdrop_${sid} ModalBackdrop__hide`} />
  )
}

ModalBackdrop.defaultProps = defaultProps

export default ModalBackdrop

作為行function ModalBackdrop(props: Props): JSX.Element唯一的變化。