Apa tujuan tanda kurung kurawal dalam sintaks JSX React?

112

Dari tutorial react.js kita melihat penggunaan tanda kurung kurawal ganda ini:

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

Lalu di tutorial kedua, "Berpikir dalam bereaksi" :

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

Namun, dokumentasi React JSX tidak menjelaskan atau menyebutkan tanda kurung kurawal ganda. Untuk apa sintaks ini (ikal ganda)? Dan apakah ada cara lain untuk mengekspresikan hal yang sama di jsx atau ini hanya kelalaian dari dokumentasi?

javascript reactjs

— Ben Roberts
sumber

9

Dari dokumentasi

The exterior set of curly braces are letting JSX know you want a JS expression. The interior set of curly braces represent a JavaScript object, meaning you’re passing in a object to the style attribute.

— Sayan

116

Ini hanya objek literal yang disisipkan dalam nilai prop. Itu sama dengan

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

— Felix Kling
sumber

@BenAlt Saya akan senang jika saya punya waktu. Anehnya, saya benar-benar menikmati pengeditan dokumentasi (adalah editor jurnal hukum dalam inkarnasi sebelumnya) dan mungkin ada beberapa perbaikan lain yang bisa didapat di sana. PS, masih tinggal di Boulder? Mari kita minum kopi atau makan siang kapan-kapan ... alangkah baiknya jika kita mengenal seseorang yang memiliki informasi mendalam tentang React karena kita baru saja memulai proyek besar dengannya.

— Ben Roberts

1

@BenRoberts Hebat, terima kasih! Sayangnya saya berada di California akhir-akhir ini, tetapi jangan ragu untuk mampir ke #reactjs IRC room di freenode dan saya akan dengan senang hati menjawab pertanyaan.

— Sophie Alpert

@BenAlpert, apakah Anda kebetulan tahu apa pemikiran di balik pembuatannya, dangerouslySetInnerHTML={__html: rawMarkup}bukan dangerouslySetInnerHTML={rawMarkup}? Apakah karena objeknya {__html: rawMarkup}bisa berubah dan string tidak?

— Brian Kung

2

@ Brian: Lihat github.com/facebook/react/issues/2256#issuecomment-63031960 (dan github.com/facebook/react/blob/… ).

— Felix Kling

55

Kawat gigi keriting memiliki 2 penggunaan di sini: -

{..} mengevaluasi ke ekspresi di JSX.
{key: value} menyiratkan objek javascript.

Mari kita lihat contoh sederhana.

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

Jika Anda amati picdikelilingi oleh kawat gigi. Itulah cara JSX untuk menanamkan variabel. picdapat berupa ekspresi / variabel / objek Javascript apa pun. Anda juga dapat melakukan sesuatu seperti {2 + 3} dan evaluasi akan menjadi {5}

Mari kita membedah gaya di sini. {width: 193}adalah objek Javascript. Dan untuk menyematkan objek ini di BEJ, Anda membutuhkan kurung kurawal, karenanya,{ {width: 193} }

Catatan: Untuk menyematkan ekspresi / variabel / objek Javascript apa pun di JSX, Anda memerlukan tanda kurung kurawal.

— Mav55
sumber

5

Saya menemukan jawaban ini lebih menjelaskan dibandingkan dengan jawaban yang ditandai sebagai diterima.

— Rohit Mandiwal

@RohitMandiwal Terima kasih Pak. Saya tahu ini agak membingungkan ketika Anda memiliki satu penjepit keriting di dalam yang lain.

— Mav55

14

Jika Anda tidak tahu, mengapa {{color: 'red'}}digunakan di styletag

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

Menurut dokumentasi resmi React , atribut style menerima objek JavaScript daripada string CSS.

— Andrew Lam
sumber

6

Bereaksi menggunakan JSX, Dalam JSX variabel apa pun, objek status, ekspresi, dll harus diapit dalam {}.

Saat memberikan gaya sebaris di JSX, itu harus ditentukan sebagai objek sehingga harus berada di dalam kurung kurawal lagi. {}.

Inilah alasan mengapa ada dua pasang kurung kurawal

— Sumeria
sumber

3

ini berarti alih-alih mendeklarasikan variabel gaya yang disetel ke objek dari properti gaya yang dimaksudkan, Anda dapat menyetel properti gaya dalam sebuah objek ... ini biasanya merupakan praktik terbaik ketika gaya yang ingin Anda tambahkan sedikit. sebuah elemen yang membutuhkan lebih banyak gaya, lebih baik mendeklarasikan variabel gaya

misalnya untuk elemen dengan properti gaya yang lebih sedikit melakukan ini

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

untuk elemen HTML dengan lebih banyak properti gaya lakukan ini

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

lalu Anda menyebutnya dengan sintaks jsx

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

— ukuyoma theophilus
sumber

1

Saya mencoba mengatakannya dengan kata-kata sederhana agar bisa dimengerti oleh semua orang. Kode di bawah ini:

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

adalah sama dengan

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

Jadi, sederhananya kita harus menggunakan ekspresi React jika kita akan menetapkan objek literal ke sebuah properti.

Untuk beberapa orang yang sebagian besar berpindah dari AngularJs ke ReactJs, ini mungkin bagian dari kebingungan dengan operator pengikat ekspresi AngularJs {{}} . Jadi, cobalah untuk melihatnya secara berbeda di ReactJs.

— Ehsan
sumber

7

Kedua fragmen kode Anda tampaknya persis sama kecuali untuk pemformatan.

— jcollum

4

@jcollum - itulah maksudnya. "Operator" penjepit ganda bukanlah operator seperti yang dia tunjukkan. Ini sangat umum di mesin template html sehingga terlihat aneh dalam bereaksi.

— aaaaaa

Saya masih tidak mengerti

— Andrew Lam

@AndrewLam - Baru saja mengeditnya. Bisakah kamu memahaminya sekarang?

— Ehsan

1

Interpretasi saya tentang tanda kurung keriting ganda adalah bahwa objek gaya hanya menerima objek JavaScript, jadi objek tersebut harus berada di dalam tanda kurung kurawal tunggal.

style={jsObj}

Objek untuk artefak gaya adalah pasangan kunci: nilai (kamus versus larik) dan objek tersebut dinyatakan sebagai, misalnya {color:'#ffffff'},.

Jadi, Anda punya:

style = { jsObj }

dan

jsObj = {color:'#ffffff'}

Sama seperti dalam aljabar, saat Anda mengganti, artinya:

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

— dpresbit
sumber