Qual é a finalidade das chaves duplas na sintaxe JSX do React?

A partir dos react.js tutorial que vemos esse uso de chaves duplas:

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

E então no segundo tutorial, "Pensando em reagir" :

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

No entanto, a documentação do React JSX não descreve ou menciona chaves duplas. Para que serve essa sintaxe (curvas duplas)? E existe outra maneira de expressar a mesma coisa em jsx ou isso é apenas uma omissão da documentação?

É apenas um objeto literal embutido no valor prop. É o mesmo que

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

O aparelho encaracolado tem 2 usos aqui: -

1. {..} avalia para uma expressão em JSX.
2. {key: value} implica um objeto javascript.

Vamos ver um exemplo simples.

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

Se você observar picestá cercado por colchetes. Essa é a maneira JSX de incorporar variáveis. picpode ser qualquer expressão / variável / objeto Javascript. Você também pode fazer algo como {2 + 3} e será avaliado como {5}

Vamos dissecar o estilo aqui. {width: 193}é um objeto Javascript. E para incorporar este objeto em JSX, você precisa de chaves, portanto,{ {width: 193} }

Nota: Para incorporar qualquer tipo de expressão / variável / objeto Javascript em JSX, você precisa de chaves.

Caso você não saiba, por que {{color: 'red'}}é usado na styletag

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

De acordo com a documentação oficial do React , o atributo style aceita um objeto JavaScript em vez de uma string CSS.

O React usa JSX. Em JSX, qualquer variável, objeto de estado, expressão, etc. deve ser colocado entre {}.

Ao fornecer estilos embutidos em JSX, ele deve ser especificado como um objeto, portanto, deve estar novamente entre chaves. {}

Esta é a razão pela qual existem dois pares de chaves

isto significa que em vez de declarar uma variável de estilo que é definida como um objeto das propriedades de estilo pretendidas, você pode apenas definir as propriedades de estilo em um objeto ... esta é geralmente uma prática recomendada quando os estilos que você deseja adicionar são poucos, porém para um elemento que precisa de mais estilo é mais limpo declarar uma variável de estilo

por exemplo, para um elemento com menos propriedades de estilo, faça isso

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

para elementos HTML com mais propriedades de estilo, faça isso

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

então você o chama com sintaxe jsx

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

Tento dizer em palavras simples para ser compreensível para todos. O código abaixo:

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

é igual a

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

Portanto, simplesmente devemos usar a expressão React se vamos atribuir um objeto literal a uma propriedade.

Para algumas pessoas que estão mudando principalmente de AngularJs para ReactJs, é provavelmente uma parte da confusão com o operador de ligação de expressão de AngularJs {{}} . Portanto, tente ver isso de forma diferente no ReactJs.

Minha interpretação das chaves duplas é que o objeto de estilo só aceita um objeto JavaScript, portanto, o objeto deve estar dentro de chaves simples.

style={jsObj}

O objeto para artefatos de estilo é de pares chave: valor (dicionário versus um array) e esse objeto é expresso como, por exemplo {color:'#ffffff'},.

Então você tem:

style = { jsObj }

e

jsObj = {color:'#ffffff'}

Assim como na álgebra, quando você substitui, significa que:

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