Qual è lo scopo delle doppie parentesi graffe nella sintassi JSX di React?

Dal tutorial di react.js vediamo questo utilizzo delle doppie parentesi graffe:

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

E poi nel secondo tutorial, "Thinking in react" :

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

Tuttavia, la documentazione di React JSX non descrive o menziona le doppie parentesi graffe. A cosa serve questa sintassi (double curlies)? E c'è un altro modo per esprimere la stessa cosa in jsx o è solo un'omissione dalla documentazione?

È solo un oggetto letterale inserito nel valore prop. È lo stesso di

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

Le parentesi graffe hanno 2 utilizzi qui: -

1. {..} restituisce un'espressione in JSX.
2. {key: value} implica un oggetto javascript.

Vediamo un semplice esempio.

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

Se osservi picè circondato da parentesi graffe. Questo è il modo JSX di incorporare la variabile. picpuò essere qualsiasi espressione / variabile / oggetto Javascript. Puoi anche fare qualcosa come {2 + 3} e valuterà {5}

Analizziamo lo stile qui. {width: 193}è un oggetto Javascript. E per incorporare questo oggetto in JSX hai bisogno di parentesi graffe, quindi,{ {width: 193} }

Nota: per incorporare qualsiasi tipo di espressione / variabile / oggetto Javascript in JSX sono necessarie le parentesi graffe.

Nel caso in cui non lo sapessi, perché {{color: 'red'}}viene utilizzato nel styletag

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

Secondo la documentazione ufficiale di React , l'attributo style accetta un oggetto JavaScript piuttosto che una stringa CSS.

React utilizza JSX, In JSX qualsiasi variabile, oggetto di stato, espressione ecc. Deve essere racchiuso tra {}.

Pur dando stili in linea in JSX, deve essere specificato come oggetto, quindi deve essere di nuovo tra parentesi graffe. {}.

Questo è il motivo per cui ci sono due paia di parentesi graffe

questo significa che invece di dichiarare una variabile di stile che è impostata su un oggetto delle proprietà di stile previste puoi invece impostare semplicemente le proprietà di stile in un oggetto ... questa di solitoèuna best practice quando gli stili che vuoi aggiungere sono pochi comunque per un elemento che necessita di più stile è più pulito dichiarare una variabile di stile

per esempio, per un elemento con meno proprietà di stile, fallo

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

per l'elemento HTML con più proprietà di stile farlo

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

quindi lo chiami con la sintassi jsx

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

Cerco di raccontarlo con parole semplici per essere comprensibile per tutti. Il codice seguente:

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

è uguale a

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

Quindi, semplicemente dovremmo usare l'espressione React se vogliamo assegnare un oggetto letterale a una proprietà.

Per alcune persone che si stanno spostando principalmente da AngularJs a ReactJs, è probabilmente una parte della confusione con l'operatore di associazione di espressioni di AngularJs {{}} . Quindi, prova a guardarlo in modo diverso in ReactJs.

La mia interpretazione delle doppie parentesi graffe è che l'oggetto style accetta solo un oggetto JavaScript, quindi l'oggetto deve essere all'interno di singole parentesi graffe.

style={jsObj}

L'oggetto per gli artefatti di stile è di coppie chiave: valore (dizionario rispetto a un array) e quell'oggetto è espresso come, ad esempio {color:'#ffffff'},.

Quindi hai:

style = { jsObj }

e

jsObj = {color:'#ffffff'}

Proprio come in algebra, quando sostituisci, è che:

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