Jaki jest cel podwójnych nawiasów klamrowych w składni JSX Reacta?

W samouczku reag.js widzimy użycie podwójnych nawiasów klamrowych:

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

A następnie w drugim samouczku „Myślenie w reakcji” :

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

Jednak dokumentacja React JSX nie opisuje ani nie wspomina o podwójnych nawiasach klamrowych. Do czego służy ta składnia (podwójne curlies)? Czy jest inny sposób wyrażenia tego samego w jsx, czy jest to tylko pominięcie w dokumentacji?

To tylko dosłowny obiekt wpisany w wartość właściwości. To jest to samo co

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

Aparaty kręcone mają tutaj 2 zastosowania: -

1. {..} zwraca się do wyrażenia w JSX.
2. {klucz: wartość} implikuje obiekt javascript.

Zobaczmy prosty przykład.

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

Jeśli obserwujesz, picjest otoczony nawiasami klamrowymi. To jest sposób osadzania zmiennych w JSX. picmoże być dowolnym wyrażeniem / zmienną / obiektem JavaScript. Możesz też zrobić coś takiego jak {2 + 3}, a to zostanie ocenione jako {5}

Przeanalizujmy tutaj styl. {width: 193}jest obiektem Javascript. Aby osadzić ten obiekt w JSX, potrzebujesz nawiasów klamrowych, dlatego{ {width: 193} }

Uwaga: Aby osadzić dowolne wyrażenie / zmienną / obiekt JavaScript w JSX, potrzebujesz nawiasów klamrowych.

Jeśli nie wiesz, dlaczego {{color: 'red'}}jest używany w styletagu

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

Zgodnie z oficjalną dokumentacją Reacta , atrybut style akceptuje obiekt JavaScript, a nie ciąg CSS.

React używa JSX, w JSX każda zmienna, obiekt stanu, wyrażenie itp. Musi być ujęta w {}.

Podając style wbudowane w JSX, musi być określony jako obiekt, więc musi ponownie znajdować się w nawiasach klamrowych. {}.

To jest powód, dla którego istnieją dwie pary nawiasów klamrowych

oznacza to, że zamiast deklarować zmienną stylu, która jest ustawiona na obiekt o zamierzonych właściwościach stylu, możesz zamiast tego po prostu ustawić właściwości stylu w obiekcie ... jest to zwykle najlepsza praktyka, gdy stylów, które chcesz dodać, jest niewiele, jednak dla element, który potrzebuje więcej stylu, deklarowanie zmiennej stylu jest czystsze

na przykład dla elementu z mniejszą liczbą właściwości stylu, zrób to

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

dla elementu HTML z większą liczbą właściwości stylu, zrób to

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

wtedy nazywasz to składnią jsx

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

Staram się to powiedzieć prostymi słowami, aby było zrozumiałe dla każdego. Poniższy kod:

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

jest równe

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

Więc po prostu powinniśmy użyć wyrażenia React, jeśli zamierzamy przypisać obiekt literałowy do właściwości.

Dla niektórych osób, które głównie przechodzą z AngularJs do ReactJs, jest to prawdopodobnie część pomyłki z operatorem wiązania wyrażeń AngularJs {{}} . Więc spróbuj spojrzeć na to inaczej w ReactJs.

Moja interpretacja podwójnych nawiasów klamrowych jest taka, że ​​obiekt style akceptuje tylko obiekt JavaScript, więc obiekt musi znajdować się w pojedynczych nawiasach klamrowych.

style={jsObj}

Obiekt dla artefaktów stylu składa się z par klucz: wartość (słownik kontra tablica), a obiekt ten jest wyrażany na przykład jako {color:'#ffffff'}.

Więc masz:

style = { jsObj }

i

jsObj = {color:'#ffffff'}

Podobnie jak w algebrze, kiedy podstawiasz, wygląda na to, że:

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