Estoy aprendiendo reaccionar y javascript en este momento y estoy luchando por entender por qué se requieren llaves cuando se pasa una cadena simple a un componente funcional de reacción como este:
function Editor({ headerText }) { return ( <div className="title"> <span>{headerText}</span> </div> ); } export default Editor;Entiendo el concepto de desestructuración de objetos. Sin embargo, el parámetro headertext solo recibe una cadena básica. ¿Por qué obtengo errores de sintaxis cuando trato de quitar las llaves si headerText es solo una cadena básica, por lo que ni siquiera debería necesitar las llaves?
De hecho, los documentos de reacción tienen una función similar a esta que ni siquiera usa llaves:
function formatName(user) { return user.firstName + ' ' + user.lastName; }Entonces, ¿por qué mi fragmento de código requiere llaves cuando el parámetro recibe un valor de cadena simple?
Requiere las llaves debido al hecho de que headerText es un nombre de propiedad en el objeto props. Si lo escribe como <span>headerText</span> , representará headerText como una cadena literal en lugar del valor pasado como accesorios por <Editor headerText='text value' />
nota: representar una cadena sin comillas es técnicamente una característica de babel y no de React, pero React viene con babel de forma predeterminada, creo que si no usaste babel, simplemente sería javascript no válido
Cuando usa <span>{headerText}</span> , en realidad toma la variable headerText y representa ese valor en la etiqueta span.
Aquí hay un ejemplo muy simple de la diferencia entre los dos. Simplemente descomente el segundo retorno y comente el primero para verlos cambiar.
https://codesandbox.io/s/friendly-babycat-rqzo9?file=/src/Test.js
¿Por qué se requieren llaves cuando se pasa una cadena simple a un componente funcional de reacción?
Esto es por diseño.
Considere cuándo se invoca Editor en otro componente:
function MyComponent() { return( <Editor headerText="Header"/> ) } Cuando React llama a la función Editor, pasa un objeto, conocido como props .
Ese objeto tendrá el texto de encabezado de cadena headerText y el valor que se pasó cuando se invocó, sin embargo, su componente no tiene garantía de que los accesorios pasados SOLO tengan ese valor singular.
Considere si su componente se usa así
function MyAwesomerComponent() { return( <> {[1,2,3,4,5].map(i=> <Editor key={i} env="production" headerText="Header"/> )} </> ) }