ReactJS | Accesorios – Conjunto 2

En nuestro artículo anterior ReactJS | Accesorios: en el conjunto 1 , habíamos discutido los accesorios, pasar y acceder a los accesorios, pasar accesorios de un componente a otro, etc. En este artículo, continuaremos nuestra discusión sobre los accesorios. 
Entonces, ¿qué pasa si queremos pasar información predeterminada usando accesorios a nuestros componentes? React nos permite hacerlo. React nos proporciona algo llamado defaultProps para este propósito. Veamos esto en detalle:
 

accesorios predeterminados

El defaultProps es un método que podemos usar para almacenar tanta información como queramos para una clase en particular. Y se puede acceder a esta información desde cualquier lugar dentro de esa clase en particular. Cada pieza de información que agregue dentro de defaultProps , se agregará como accesorio de esa clase. Puede parecer confuso en este punto. Veamos un programa en el que usaremos defaultProps para crear algunos accesorios para una clase.

Abra el directorio de su proyecto de reacción y edite el archivo App.js de la carpeta src:

aplicación src.js:

import React from 'react';
import ReactDOM from 'react-dom';
 
// Component
class ExampleClass extends React.Component{
    render(){
        return(
                <div>
                    {/* using default prop - title */}
                    <h1>This is {this.props.title}'s Website!</h1>
                </div>
            );
    }
}
 
// Creating default props for
// ExampleClass Component
ExampleClass.defaultProps = {
    title: "GeeksforGeeks"
}
 
ReactDOM.render(
    <ExampleClass />,
    document.getElementById("root")
);

Producción: 
 

Puede ver en el programa anterior que hemos creado un accesorio predeterminado llamado title fuera de la clase ExampleClass y accedimos a este accesorio dentro de esa clase usando esta declaración.props. 
También podemos pasar arrays como accesorios, en lugar de pasar elementos individuales. Veamos cómo se hace en el siguiente programa: 
abra el directorio de su proyecto de reacción y edite el archivo App.js desde la carpeta src:

aplicación src.js:

import React from 'react';
import ReactDOM from 'react-dom';
 
// Component
class ExampleClass extends React.Component{
    render(){
        return(
                <div>
                    {/* accessing array prop directly */}
                    <h1>The names of students are: {this.props.names}</h1>
                </div>
            );
    }
}
 
// Passing an array as prop
ExampleClass.defaultProps = {
    names: ['Ram', 'Shyam', 'Raghav']
}
 
ReactDOM.render(
    <ExampleClass />,
    document.getElementById("root")
);

En el programa anterior, hemos pasado una array de nombres como apoyo al componente ExampleClass. También hemos accedido a esta array directamente para imprimir el contenido de la array. A continuación se muestra el resultado cuando se procesa el código anterior: 
 

Puede ver en el resultado anterior que, al imprimir el contenido de la array usando la declaración this.props directamente, simplemente imprime todos los elementos de la array sin ningún formato. Pero esto no se ve bien, ¿verdad? No es así como imprimimos elementos de array en otros lenguajes de programación. ¿Qué sucede si queremos agregar algo de formato antes de imprimir un elemento de array? O en otras palabras, ¿qué pasa si queremos iterar la array pasada como accesorios? Para hacerlo, podemos usar el método map() disponible en JavaScript. Tendremos que pasar una función como argumento al método map. La función aceptará dos parámetros de los cuales el primero es un elemento de la array y el segundo es el índice de los elementos de la array. Para obtener más información sobre el mapa() en detalles, visite esteEnlace. Veamos a continuación el código en el que estamos usando el método map() para iterar sobre una array pasada como una propiedad predeterminada a un componente: 

Abra el directorio de su proyecto de reacción y edite el archivo App.js de la carpeta src:

aplicación src.js:

import React from 'react';
import ReactDOM from 'react-dom';
 
// Component
class ExampleClass extends React.Component{
    render(){
        return(
                <div>
                    {/* iterating over array using map() */}
                    <h1>{this.props.names.map(
                        function namesIterator(item,i){
                            return (
                                    "Student "+ (i+1) +": " +
                                     item+
                                     ((i!=2)?',  ':'\n')
                                )
                        }
 
                        )}</h1>
                </div>
            );
    }
}
 
// Passing an array as prop
ExampleClass.defaultProps = {
    names: ['Ram', 'Shyam', 'Raghav']
}
 
ReactDOM.render(
    <ExampleClass />,
    document.getElementById("root")
);

Producción: 
 

Puede ver en el programa anterior cómo estamos iterando sobre la array pasada al componente ExampleClass usando map(). 
Eso es todo por este artículo. En nuestro próximo artículo, veremos cómo validar tipos en accesorios o cómo realizar la verificación de tipos.