javascript - Egenskapen 'defaultProps' finns inte på typen

Jag har en Typescript React-klasskomponent som följer:

import React, { Component } from 'react';

interface Props {
  bar?: boolean;
}

const defaultProps: Partial<Props> = {
  bar: false,
};

class Foo extends Component<Props> {
  render() {
    ...
  }
}

Foo.defaultProps = defaultProps;

export default Foo;

Här får jag följande typfel:

Property 'defaultProps' does not exist on type 'typeof Foo'.

Jag ser 2 lösningar för att lösa detta. En är att deklarera typen på klassen på följande sätt:

class Foo extends Component<Props> {
  static defaultProps: Partial<Props>;

  render() {
    ...
  }
}

Det andra är att deklarera defaultProps helt inne i klassen på det här sättet:

class Foo extends Component<Props> {
  static defaultProps: Partial<Props> = {
    bar: false,
  };

  render() {
    ...
  }
}

Jag använder eslint-config-airbnb 18.0.1 och eslint 6.1.0 så båda dessa lösningar ger detta eslint-fel:

'defaultProps' should be declared outside the class body (react/static-property-placement)

Finns det ett sätt att deklarera defaultProps utanför klassen utan att orsaka ett typfel?

Svar #1

TS-dokument säger att statiska defaultProps är vägen att gå.

Verkar konstigt att lägga till eslint ovanpå TS, jag tror att airbnb-konfigurationen är för JavaScript, inte TypeScript.

Svar #2

din lösning 2 är det bästa sättet att hantera det fallet:

class Foo extends Component<Props> {
  static defaultProps: Partial<Props>;

  render() {
    ...
  }
}

Om du har möjlighet, skulle det bästa och renaste enligt min åsikt vara att refaktorera din komponent till funktionell stil:

function Foo({ 
  var1 = 'defaultValue, 
  var2 = 'default2 
}: Props) {
  return <View>...</View>
}

Relaterade artiklar