javascript - pagina - react tutorial

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

Question

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

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

Y luego en el segundo tutorial, "Pensar 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 cresta) para? ¿Y hay otra forma de expresar lo mismo en jsx o es solo una omisión de la documentación?

Answer 1

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

<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.

Answer 2

Es solo un objeto literal enmarcado en el valor prop. Es lo mismo que

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

Answer 3

Intento decirlo en palabras sencillas para que todo el mundo lo entienda. El siguiente código:

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

es igual a

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

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

Para algunas personas que se mueven principalmente de AngularJs a ReactJs, es probable que sea una parte de la confusión con el operador de enlace de expresiones de AngularJs {{}} . Por lo tanto, intente verlo de manera diferente en ReactJs.