React'in JSX sözdiziminde çift kaşlı ayraçların amacı nedir?

Gönderen öğretici react.js biz çift küme parantezleri bu kullanımını görmek:

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

Ve sonra ikinci eğiticide, "Tepki içinde düşünme" :

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

Ancak, React JSX belgeleri çift ​​kaşlı ayraçları açıklamaz veya bunlardan bahsetmez. Bu sözdizimi (çift kıvrımlar) ne için? Aynı şeyi jsx'te ifade etmenin başka bir yolu var mı yoksa bu sadece dokümantasyondan bir eksiklik mi?

Bu, prop değerinde harfiyen satır içine alınmış bir nesne. İle aynı

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

Kıvırcık tellerin burada 2 kullanımı vardır: -

1. {..}, JSX'te bir ifade olarak değerlendirilir.
2. {anahtar: değer}, bir javascript nesnesi anlamına gelir.

Basit bir örnek görelim.

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

Eğer gözlemlerseniz picparantez ile çevrilidir. Bu, değişkeni yerleştirmenin JSX yolu. picherhangi bir Javascript ifadesi / değişken / nesne olabilir. Ayrıca {2 + 3} gibi bir şey de yapabilirsiniz ve {5}

Burada stili inceleyelim. {width: 193}bir Javascript nesnesidir. Ve bu nesneyi JSX'e gömmek için küme parantezlerine ihtiyacınız var.{ {width: 193} }

Not: Her türlü Javascript ifadesini / değişkenini / nesnesini JSX'e gömmek için kaşlı ayraçlara ihtiyacınız vardır.

Bilmiyorsanız, neden etiketinde {{color: 'red'}}kullanılıyor?style

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

React resmi belgelerine göre , style özelliği bir CSS dizesi yerine bir JavaScript nesnesini kabul eder .

React, JSX kullanır, JSX'te herhangi bir değişken, durum nesnesi, ifade vb. {} İçine alınmalıdır.

JSX'te satır içi stilleri verirken, bir nesne olarak belirtilmesi gerekir, bu nedenle tekrar küme parantezlerinin içinde olmalıdır. {}.

İki çift küme parantezi olmasının nedeni budur

bu, amaçlanan stil özelliklerinin bir nesnesine ayarlanmış bir stil değişkenini bildirmek yerine, bunun yerine bir nesnedeki stil özelliklerini ayarlayabileceğiniz anlamına gelir ... Daha fazla stil gerektiren bir öğe, stil değişkeni bildirmek daha temizdir

örneğin daha az stil özelliğine sahip bir öğe için bunu yapın

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

Daha fazla stil özelliğine sahip HTML öğesi için bunu yapın

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

sonra onu jsx sözdizimi ile çağırırsın

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

Herkes için anlaşılır olması için basit kelimelerle anlatmaya çalışıyorum. Aşağıdaki kod:

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

eşittir

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

Yani, bir özelliğe değişmez bir nesne atayacaksak, basitçe React ifadesini kullanmalıyız .

Esas olarak AngularJ'lerden ReactJ'lere geçen bazı kişiler için bu, muhtemelen AngularJs'in ifade bağlama operatörü {{}} ile kafa karışıklığının bir parçasıdır . Bu nedenle, ReactJs'de buna farklı bir şekilde bakmaya çalışın.

Çift kıvrımlı parantezlerle ilgili yorumum, stil nesnesinin yalnızca bir JavaScript nesnesini kabul ettiği, dolayısıyla nesnenin tek küme parantezlerinin içinde olması gerektiğidir.

style={jsObj}

Stil yapaylıklarının nesnesi anahtar: değer çiftleridir (sözlük ve bir diziye karşı) ve bu nesne, örneğin olarak ifade edilir {color:'#ffffff'}.

Yani şunlara sahipsin:

style = { jsObj }

ve

jsObj = {color:'#ffffff'}

Tıpkı cebirde olduğu gibi, yerine koyduğunuzda şu anlama gelir:

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