Comment spécifier (en option) par défaut accessoires avec Tapuscrit pour les apatrides, fonctionnelle Réagir composants?

Je suis en train de créer un apatride Réagir composant avec des accessoires optionnels et des defaultprops en caractères d'imprimerie (pour Réagir Natif de projet). C'est trivial à la vanille, JS, mais je suis perplexe quant à la façon de le réaliser en texte dactylographié.

Avec le code suivant:

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;

Appel <Test title="Sir" name="Lancelot" /> rend "Sir Lancelot" comme prévu, mais <Test /> les résultats en rien, du moment de la sortie
"M. McGee".

Toute aide est grandement appréciée.

qu'en est Test.defaultProps = defaultProps ?
Au passage: essayez d'utiliser Partial<Props> pour spécifier un sous-ensemble d'accessoires

OriginalL'auteur Matt Stow | 2016-10-24

  1. 21

    Voici une question similaire, avec une réponse: Réagir avec Tapuscrit - définir des defaultprops dans apatrides fonction

    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;

    OriginalL'auteur Matt Stow

  2. 0

    J'ai testé avec succès la variante suivante:

    import React, { Component } from 'react';

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

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


const Test: React.SFC<Props> = (props: TestProps): JSX.Element {
  const propsPrivate: TestProps = { ...defaultProps, ...props }

  return (
      <div>
          {propsPrivate.title} {propsPrivate.name}
      </div>
    )
}

Test.defaultProps = defaultProps

    OriginalL'auteur Roman

  3. -2

    Pour moi, ce n'est pas look comme un tapuscrit question.

    AVERTISSEMENT: j'ai seulement essayé cela avec des caractères d'imprimerie.

    Cependant, le problème est que les accessoires toujours existe (même comme un objet vide lorsque rien n'est transmis). Il y a 2 solution de contournement pour ce faire, cependant.

    La première, malheureusement, tue le super propre bouclés-brace-moins de syntaxe que vous avez, mais vous permet de garder defaultProps autour de.

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

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

const Test = (passedIn: TestProps) => {
    const props = Object.assign({}, defaultProps, passedIn);
    return (
        <p>
            {props.title} {props.name}
        </p>
    );
}

    une autre alternative qui pourrait obtenir un peu poilue si vous avez une TONNE d'accessoires, qui vous permet de garder votre syntaxe d'origine est quelque chose comme ceci:

    const Test = (props: TestProps) => (
    <Text>
        {props.title || 'Mr'} {props.name || 'McGee'}
    </Text>
);

    Espérons que cette aide!

    vous n'avez pas à faire l'Objet.attribuer avec passedIn des accessoires et des valeurs par défaut - c'est ce que Réagir automatiquement.
    Votre solution sera probablement de travail, mais c'est faux. Vous devez utiliser defaultProps propriété statique d'un apatride en composant fonction pour définir les valeurs de propriété par défaut.

    OriginalL'auteur drewwyatt