javascript - Hur anger man (valfria) standardprops med TypeScript för statslösa, funktionella React-komponenter?

Jag försöker skapa en stateless React-komponent med valfria props och defaultProps i Typescript (för ett React Native-projekt). Detta är enkelt med vanlig JS, men jag är förbryllad över hur man uppnår det i TypeScript.

Med följande kod:

import React, { Component } from 'react';
import { Text } from 'react-native';

interface TestProps {
    title?: string,
    name?: string
}

const defaultProps: TestProps = {
    title: 'Mr',
    name: 'McGee'
}

const Test = (props = defaultProps) => (
    <Text>
        {props.title} {props.name}
    </Text>
);

export default Test;

Att anropa <Test title="Sir" name="Lancelot" /> visar "Sir Lancelot" som förväntat, men <Test /> ger inget, när det borde visa "Mr McGee".

All hjälp uppskattas mycket.

Svar #1

Här är en liknande fråga med ett svar: React med TypeScript - definiera defaultProps i en statslös funktion

import React, { Component } from 'react';
import { Text } from 'react-native';

interface TestProps {
    title?: string,
    name?: string
}

const defaultProps: TestProps = {
    title: 'Mr',
    name: 'McGee'
}

const Test: React.SFC<TestProps> = (props) => (
    <Text>
        {props.title} {props.name}
    </Text>
);

Test.defaultProps = defaultProps;

export default Test;

Svar #2

Jag har upptäckt att det enklaste sättet är att använda valfria argument. Observera att defaultProps så småningom kommer att tas bort på funktionella komponenter.

Exempel :

interface TestProps {
    title?: string;
    name?: string;
}

const Test = ({title = 'Mr', name = 'McGee'}: TestProps) => {
    return (
        <p>
            {title} {name}
        </p>
    );
}

Svar #3

Så här gillar jag att göra det:

type Props = { foo: Foo } & DefaultProps
type DefaultProps = Partial<typeof defaultProps>
const defaultProps = {
  title: 'Mr',
  name: 'McGee'
}

const Test = (props: Props) => {
  props = {...defaultProps, ...props}
  return (
    <Text>
      {props.title} {props.name}
    </Text>
  )
}

export default Test

Relaterade artiklar