Pesquisa de site

javascript - Qual é o propósito das chaves duplas na sintaxe JSX do React?

No tutorial de React.js vemos este uso de chaves duplas:

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

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

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

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

Resposta #1

É apenas um literal de objeto embutido no valor da propriedade. É o mesmo que

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

Resposta #2

As chaves têm 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, pic está cercado por chaves. Essa é a forma do JSX de inserir variáveis. pic pode ser qualquer expressão/variável/objeto do Javascript. Você também pode fazer algo como { 2+3 } e ele 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.

Resposta #3

A sintaxe de {{color: 'red'}} é usada na tag style porque, de acordo com a documentação do React, o atributo style aceita um objeto JavaScript com propriedades em camelCase em vez de uma string CSS.

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

Artigos relacionados