Optionale Requisiten mit Standardwerten in React

1. Optionale Requisiten in TypeScript
2. Optionale Requisiten mit Standardwerten in TypeScript
3. Verwenden Sie die Eigenschaft defaultProps in React, um Standardwerte für Props festzulegen

Props in React ermöglichen es uns, Daten und Argumente zwischen verschiedenen Komponenten zu übergeben, die durch den gesamten Komponentenbaum in React fließen können. Die an verschiedene Komponenten übergebenen Requisiten können feste Typen haben, die als primitive oder benutzerdefinierte Typen wie in TypeScript definiert sind.

Dieses Tutorial zeigt, wie die optionalen Props von React mit Standardwerten verwendet werden können.

Optionale Requisiten in TypeScript

In TypeScript kann ein Typ oder Prop optional gemacht werden, indem das ? verwendet wird. Operator. Diese Tatsache kann verwendet werden, um optionale Parameter in React zu übergeben.

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

Im obigen Beispiel, das die Typdefinition von Requisiten einer bestimmten Komponente enthält, sind die Attribute color und size als optional definiert.

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>
    )
}

Im obigen Beispiel ist also die übergeordnete Komponente App, und Props vom Typ Props werden an die Komponente Card weitergegeben. Die Attribute color und title sind optional durch das ? gekennzeichnet. Operator.

Wird das optionale Attribut nicht als Prop an die Komponente weitergegeben, wird es als undefined initialisiert und somit nicht angezeigt oder gerendert.

Optionale Requisiten mit Standardwerten in TypeScript

Das obige Beispiel kann auch mit Standardwerten verwendet werden, die mit der Komponente bereitgestellt werden.

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>
    )
}

Früher wurde das Attribut color nicht gerendert, da es keinen Standardwert gab, aber jetzt, da kein Wert als Requisiten übergeben wird, wird der Standardwert zum Rendern der Komponente verwendet. Der Standardwert für das Attribut title wird jedoch nicht verwendet, da er durch die Übergabe des Props an die Komponente überschrieben wird.

Verwenden Sie die Eigenschaft defaultProps in React, um Standardwerte für Props festzulegen

React unterstützt die Zuweisung von Standardwerten zu Props, die mit dem Attribut defaultProps übergeben werden. Die Standardwerte können direkt zugewiesen und beim Rendern der Komponente verwendet werden.

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>
    )
}