Accessoires optionnels avec des valeurs par défaut dans React

1. Accessoires facultatifs dans TypeScript
2. Accessoires facultatifs avec des valeurs par défaut dans TypeScript
3. Utilisez la propriété defaultProps dans React pour définir les valeurs par défaut des accessoires

Les accessoires dans React nous permettent de transmettre des données et des arguments entre différents composants, qui peuvent circuler dans l’ensemble de l’arborescence des composants dans React. Les accessoires transmis aux différents composants peuvent avoir des types fixes définis comme des types primitifs ou définis par l’utilisateur comme dans TypeScript.

Ce didacticiel montrera comment les accessoires optionnels de React peuvent être utilisés avec des valeurs par défaut.

Accessoires facultatifs dans TypeScript

Dans TypeScript, un type ou un accessoire peut être rendu facultatif à l’aide du ? opérateur. Ce fait peut être utilisé pour passer des paramètres optionnels dans React.

interface OptionalComponentProps {
    color? : string;
    title : string;
    size? : number;
}

Dans l’exemple ci-dessus, contenant la définition de type des props d’un composant particulier, les attributs color et size sont définis comme étant facultatifs.

interface Props {
    color? : string;
    size: number;
    title? : string;
}

function Card(props : Props){
    const { color , size, title} = props;
    return (
        <div>
            <div>{color}</div>
            <div>{size}</div>
            <div>{title}</div>
        </div>
    )
}

function App() {
    return (
        <div>
            <Card size={20} title="Cool card" />
        </div>
    )
}

Ainsi dans l’exemple ci-dessus, le composant parent est App, et les props de type Props sont passés au composant Card. Les attributs color et title sont marqués facultatifs par le ? opérateur.

Si l’attribut facultatif n’est pas transmis en tant que prop au composant, il est initialisé comme undefined et n’est donc ni affiché ni rendu.

Accessoires facultatifs avec des valeurs par défaut dans TypeScript

L’exemple ci-dessus peut également être utilisé avec les valeurs par défaut fournies avec le composant.

interface Props {
    color? : string;
    size: number;
    title? : string;
}

function Card(props : Props){
    const { color = 'red' , size, title = 'Default title'} = props;
    return (
        <div>
            <div>{color}</div>
            <div>{size}</div>
            <div>{title}</div>
        </div>
    )
}

function App() {
    return (
        <div>
            <Card size={20} title="Cool card" />
        </div>
    )
}

Auparavant, l’attribut color n’était pas rendu car il n’y avait pas de valeur par défaut, mais maintenant, comme aucune valeur n’est transmise en tant que props, la valeur par défaut est utilisée pour rendre le composant. Cependant, la valeur par défaut de l’attribut title n’est pas utilisée, car elle est remplacée par la propriété transmise au composant.

Utilisez la propriété defaultProps dans React pour définir les valeurs par défaut des accessoires

React prend en charge l’attribution de valeurs par défaut aux accessoires passés à l’aide de l’attribut defaultProps. Les valeurs par défaut peuvent être directement attribuées et utilisées lors du rendu du composant.

interface Props {
    color? : string;
    size: number;
    title? : string;
}

const defaultProps : Props = {
    color :"red",
    size : 20,
    title : "A cool title"
}

function Card(props : Props){
    return (
        <div>
            <div>{props.color}</div>
            <div>{props.size}</div>
            <div>{props.title}</div>
        </div>
    )
}

Card.defaultProps = defaultProps;

function App() {
    return (
        <div>
            <Card size={20} title="Cool card" />
        </div>
    )
}