javascript - react - ¿Qué significan las llaves en JSX(Reaccionar)?

reactjs without jsx

Question

Por ejemplo, para configurar un estilo en reaccionar podrías hacer

var css = {color: red}

y

<h1 style={css}>Hello world</h1>

¿Por qué necesita las llaves alrededor de css en el segundo fragmento de código?

Answer 1

Las llaves son una sintaxis especial para que el analizador JSX sepa que necesita interpretar los contenidos entre ellos como JavaScript en lugar de una cadena.

Los necesita cuando quiere usar una expresión de JavaScript como una variable o una referencia dentro de JSX. Porque si usa la sintaxis de comillas dobles estándar así:

var css = { color: red }

<h1 style="css">Hello world</h1>

JSX no sabe que pretendías usar la variable css en el atributo de estilo en lugar de la cadena. Y al colocar las llaves alrededor de la variable css , le está diciendo al analizador "tome los contenidos de la variable css y css aquí". (Técnicamente es su evaluación del contenido).

Este proceso se conoce generalmente como "interpolación".

Answer 2

Si no usa la variable css , el JSX podría verse así:

<h1 style={ {color: ''red''} }>Hello world</h1>

Supongo que estás confundido acerca de las llaves dobles.

para que sepa que las llaves en JSX significa processing in a JavaScript way , por lo que las llaves externas se usan exactamente para este propósito.

Pero la propiedad de style acepta un object . Y un objeto también necesita otro par de llaves para envolverlo. Ese es el propósito de los internos.

Answer 3

Usted pone llaves cuando quiere usar el valor de una variable dentro de "html" (entonces dentro de la parte de render). Es solo una forma de decirle a la aplicación que tome el valor de la variable y la ponga allí, en lugar de una palabra.