Aquí hay un poco de JSX que pasa una prop llamada name con un valor de cadena de "Zero" en el componente Person:
<Person name='Dave' />
Otro ejemplo, pasando una clase className con el valor "person":
<div className='person' />
JSX usa className en lugar de class para especificar clases CSS. Puede olvidarse esto una y otra vez. Se escribirá "class" por costumbre, y React advertirá al respecto. Esta bien, simplemente cambiarlo a className.
Si se observa el div se cierra automáticamente. Esta capacidad ya no es solo para < input />: en JSX, cada componente puede cerrarse automáticamente. De hecho, si el componente no tiene hijos (sin contenido), la convención es escribirlo así, en lugar de usar una etiqueta de cierre como < div > </ div >.
En el siguiente componente, se pasa una cadena para className, un número para el prop de age y una expresión de JavaScript normal como name:
function Dave() {
const firstName = "Zero";
const lastName = "Identidad";
return (
<Person
className='person'
age={33}
name={firstName + ' ' + lastName} />
);
}
Es importante comprender que el JS dentro de las llaves debe ser una expresión, no una declaración. Aquí algunas cosas que se puede hacer dentro de las expresiones JSX:
• Matemáticas, concatenación: {7 + 5} o {'Tu' + 'Nombre'}
• Llamadas de función: {this.getFullName (person)}
• Operador ternario (?): {name === 'Zero'? 'yo': 'no yo'}
• Expresiones booleanas: {isEnabled && 'enabled'}
Aquí hay algunas cosas que no puedes hacer:
• Definir nuevas variables con let, const y var.
• Usar if, for, while, etc.
• Definir funciones con function
Todas las reglas que se aplican a los argumentos de función se aplican a las expresiones JSX. ¿Se podría llamar a una función como esta?
myFunc( const x = true ; x && 'is true');
Pues no! Eso se ve mal. Si se intenta pasar ese argumento a una expresión JSX, esto es lo que se obtendrá:
<Broken value={ const x = true ; x && 'is true'} />
// gets compiled to:
React.createElement(Broken, {
value : const x = true ; x && 'is true'
}, null );
Entonces, cuando se intente decidir qué colocar en una expresión JSX, preguntarse: "¿Podría pasar esto como un argumento de función?"