Accesorios opcionales con valores predeterminados en React

1. Accesorios opcionales en TypeScript
2. Accesorios opcionales con valores predeterminados en TypeScript
3. Use la propiedad defaultProps en React para establecer valores predeterminados para accesorios

Los accesorios en React nos permiten pasar datos y argumentos entre diferentes componentes, que pueden fluir a través de todo el árbol de componentes en React. Los accesorios pasados ​​a diferentes componentes pueden tener tipos fijos definidos como tipos primitivos o definidos por el usuario como en TypeScript.

Este tutorial demostrará cómo se pueden usar los accesorios opcionales de React con valores predeterminados.

Accesorios opcionales en TypeScript

En TypeScript, un tipo o accesorio se puede hacer opcional usando el ? operador. Este hecho se puede usar para pasar parámetros opcionales en React.

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

En el ejemplo anterior, que contiene la definición de tipo de accesorios de un componente en particular, los atributos color y size se definen como opcionales.

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

Por lo tanto, en el ejemplo anterior, el componente principal es App, y los props de tipo Props se pasan al componente Card. Los atributos color y título están marcados opcionalmente por el ? operador.

Si el atributo opcional no se pasa como prop al componente, se inicializa como undefined y por lo tanto no se muestra ni se renderiza.

Accesorios opcionales con valores predeterminados en TypeScript

El ejemplo anterior también se puede utilizar con los valores predeterminados proporcionados con el componente.

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

Anteriormente, el atributo color no se representaba porque no había un valor predeterminado, pero ahora, dado que no se pasa ningún valor como accesorios, se utiliza el valor predeterminado para representar el componente. Sin embargo, el valor predeterminado para el atributo title no se usa, ya que se anula al pasar el accesorio al componente.

Use la propiedad defaultProps en React para establecer valores predeterminados para accesorios

React tiene el soporte para asignar valores predeterminados a los accesorios pasados ​​usando el atributo defaultProps. Los valores predeterminados se pueden asignar y usar directamente al renderizar el componente.

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