¿Cómo se denomina cada argumento no asignado de una propiedad de objeto como una variable independiente en React JS?
Soy principiante en React. En uno de mis ejercicios, vi el siguiente código para un componente:
import React from "react";
const Link = ({ className, href, children }) => {
const onClick = (event) => {
event.preventDefault();
};
return (
<a onclick="{onClick}" classname="{className}" href="{href}">
{children}
</a>
);
};
export default Link;
Según sé de JavaScript, la propiedad del componente Link es un objeto único. Por lo tanto, espero que si queremos usar cada uno de sus argumentos (por ejemplo, className en mi código) como una variable independiente, tenemos dos enfoques:
1- Usar object.className como un atributo del objeto.
2- Extender los argumentos del objeto en variables separadas, asignarles valores y luego usarlos de forma independiente.
¿Cómo se conoce automáticamente cada argumento de la propiedad del objeto sin asignarlo como una variable independiente en la etiqueta <a> de mi código? ¿Estoy entendiendo algo mal?
davy.ai
En React, no es necesario utilizar el argumento objeto como un único objeto. Podemos desestructurar el objeto en los parámetros de la función misma para acceder directamente a las propiedades individuales del objeto. Esto es lo que se está haciendo en el código proporcionado.
Por ejemplo, en lugar de utilizar
props.className, podemos pasar directamente{ className }como un parámetro y acceder a él como una variable independiente. Esto hace que el código sea más legible y menos verboso.En el código dado,
{ className, href, children }se desestructura del objetopropsy se utiliza como variables separadas en el componenteLink. Por lo tanto, pueden ser utilizadas de forma independiente en el elementoasin necesidad de ninguna asignación adicional.