¿Cuál es el propósito de las llaves dobles en la sintaxis JSX de React?

En el tutorial de react.js vemos este uso de llaves dobles:

<span dangerouslySetInnerHTML={{ __html: rawMarkup }} />

Y luego, en el segundo tutorial, "Pensando en reaccionar" :

 <span style={{ color: 'red' }}>
     {this.props.product.name}
 </span>;

Sin embargo, la documentación de React JSX no describe ni menciona llaves dobles. ¿Para qué es esta sintaxis (doble curlies)? ¿Y hay otra forma de expresar lo mismo en jsx o es solo una omisión de la documentación?

Es solo un objeto literal en línea en el valor de prop. Es lo mismo que

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

Los tirantes rizados tienen 2 usos aquí: -

1. {..} se evalúa como una expresión en JSX.
2. {clave: valor} implica un objeto javascript.

Veamos un ejemplo sencillo.

<Image source={pic} style={{width: 193}}/>

Si observa picestá rodeado de tirantes. Esa es la forma JSX de incrustar la variable. picpuede ser cualquier expresión / variable / objeto de Javascript. También puede hacer algo como {2 + 3} y se evaluará como {5}

Analicemos el estilo aquí. {width: 193}es un objeto Javascript. Y para incrustar este objeto en JSX, necesita llaves, por lo tanto,{ {width: 193} }

Nota: Para incrustar cualquier tipo de expresión / variable / objeto de Javascript en JSX, necesita llaves.

En caso de que no lo supiera, ¿por qué {{color: 'red'}}se usa en la styleetiqueta?

<span style={{color: 'red'}}>
    {this.props.product.name}
</span>;

Según la documentación oficial de React , el atributo de estilo acepta un objeto JavaScript en lugar de una cadena CSS.

React usa JSX, en JSX cualquier variable, objeto de estado, expresión, etc. debe incluirse entre {}.

Al proporcionar estilos en línea en JSX, debe especificarse como un objeto, por lo que debe estar entre llaves nuevamente. {}.

Esta es la razón por la que hay dos pares de llaves

esto significa que en lugar de declarar una variable de estilo que se establece en un objeto de las propiedades de estilo deseadas, puede simplemente establecer las propiedades de estilo en un objeto ... esta es generalmente una mejor práctica cuando los estilos que desea agregar son pocos, sin embargo, para un elemento que necesita más estilo es más limpio declarar una variable de estilo

por ejemplo, para un elemento con menos propiedades de estilo, haga esto

<span style={{color: 'red'}}>
  {this.props.product.name}
</span>

para el elemento HTML con más propiedades de estilo, haga esto

const spanStyle = {
   backgroundColor: 'red',
   color: 'grey',
   margin: '-25px'
}

luego lo llamas con sintaxis jsx

<span style={spanStyle}>
  {this.props.product.name}
</span>

Intento decirlo en palabras sencillas para que sea comprensible para todos. El siguiente código:

<span dangerouslySetInnerHTML={{__html: rawMarkup}} />

es igual a

<span 
     dangerouslySetInnerHTML={ {__html: rawMarkup} } 
/>

Entonces, simplemente deberíamos usar la expresión React si vamos a asignar un objeto literal a una propiedad.

Para algunas personas que se están moviendo principalmente de AngularJs a ReactJs, probablemente sea parte de la confusión con el operador de enlace de expresión de AngularJs {{}} . Por lo tanto, intente verlo de manera diferente en ReactJs.

Mi interpretación de las llaves dobles es que el objeto de estilo solo acepta un objeto de JavaScript, por lo que el objeto debe estar dentro de llaves simples.

style={jsObj}

El objeto para los artefactos de estilo es de pares clave: valor (diccionario frente a una matriz) y ese objeto se expresa como, por ejemplo, {color:'#ffffff'} ,.

Entonces tienes:

style = { jsObj }

y

jsObj = {color:'#ffffff'}

Al igual que en álgebra, cuando sustituye, se mantiene que:

style = { {color:'#ffffff'} }