reactjs - Hvordan erklære TypeScript statisk metode fra React funksjonell komponent

Jeg trenger å referere til statiske metoder fra min funksjonelle komponent i React. Jeg har laget et lite eksempel her på hva jeg ønsker å gjøre (det fungerer i JavaScript). Feilen jeg får er på linje 10 const x =...

TS2339: Egenskapen 'GetMyArray' eksisterer ikke på typen 'FunctionComponent'.

import React, {FunctionComponent} from 'react';

interface Props {
    isLoading?: boolean,
}

const Speakers : FunctionComponent<Props> = ({isLoading}) => {

    if (isLoading) {
        const x = Speakers.GetMyArray();
        return (
            <div>{JSON.stringify({x})}</div>
        );
    } else {
        return <div></div>;
    }
};

Speakers.GetMyArray = () => {
    return [1,2,3,4]
};

export default Speakers

Svar #1

Dette ville vært enklere å gjøre ved å bruke en klassekomponent siden static-funksjonene og typen på egenskapene kan utledes i klasse-definisjoner.

class Speakers extends React.Component<Props> {
  static GetMyArray = () => [1, 2, 3, 4]

  render() {
    const { isLoading } = this.props
    if (isLoading) {
      const x = Speakers.GetMyArray(); // works great
      return (
        <div>{JSON.stringify({x})}</div>
      );
    } else {
      return <div></div>;
    }
  }
}

Når det er sagt, kunne du gjerne gjøre det ved å utvide React.SFC eller bruke en skjæringstype:

const Speakers: React.SFC<Props> & { GetMyArray?: () => number[]; } = (props) => {
  const { isLoading } = props
  if (isLoading) {
    const x = Speakers.GetMyArray!(); // works, sorta
    return (
      <div>{JSON.stringify({x})}</div>
    );
  } else {
    return <div></div>;
  }
}

Du må merke GetMyArray som valgfri fordi du ikke kan definere den samtidig som du definerer funksjonen, så du må bruke en !-operator (eller sjekke at funksjonen finnes) når du kaller den statiske funksjonen. ! i Speakers.GetMyArray!(); forteller typekontrolløren at du vet hva du gjør og at GetMyArray faktisk ikke er undefined. Se her for å lese om ikke-null-assertjonsoperatoren.

Oppdater

Jeg så ikke at det å bruke React.FC nå er den foretrukne måten å bruke funksjonskomponenter på siden funksjonskomponenter ikke lenger kan betraktes som statsløse.

Hvis du kan klare deg med bare å bruke const Speakers=(props: Props) => ..., kan det å oppgradere TypeScript til 3.1 være ditt beste alternativ!

Svar #2

Mitt svar er ikke helt nøyaktig på spørsmålet ditt. Men jeg tror det vil være nyttig for noen som ønsker å legge til en statisk komponent til funksjonskomponenten.

import React from 'react';
import { Text } from 'react-native';
import Group, { RadioButtonGroupProps } from './Group';

type RadioButtonType = {
  text: string,
};

interface StaticComponents {
  Group?: React.FC<RadioButtonGroupProps>
}

const RadioButton: React.FC<RadioButtonType> & StaticComponents = 
({ text }) => (<Text>{text}</Text>);

RadioButton.Group = Group;

export default RadioButton;

Husk konfigurasjon som dette hvis du vil import React from 'react' direkte i stedet for import * as React from 'react'

Prestasjon:

Relaterte artikler