1
00:00:02,870 --> 00:00:09,860
Sekarang Anda mungkin juga ingat bahwa kami memiliki sedikit tambahan di sini di tempat ini dan kami

2
00:00:09,860 --> 00:00:17,090
baru saja bekerja ketika kami menunjukkan orang maka sebenarnya warna latar belakang tombol harus berubah untuk membaca dan

3
00:00:17,450 --> 00:00:24,260
mendengar hover stall harus memastikan bahwa kami menata sebuah tombol berbeda jika kita mengarahkannya pada dasarnya.

4
00:00:24,300 --> 00:00:31,040
Sekarang bagaimana kita dapat mengubah gaya secara kondisional seperti ini ketika menggunakan komponen gaya.

5
00:00:31,040 --> 00:00:34,730
Syukurlah itu super super sederhana.

6
00:00:34,760 --> 00:00:36,710
Kami memiliki tombol gaya di sini.

7
00:00:36,740 --> 00:00:42,980
Dan kami ingin mengubah beberapa gaya berdasarkan beberapa keadaan di luar komponen.

8
00:00:42,980 --> 00:00:50,250
Jadi dalam hal ini berdasarkan sumur pertunjukan orang kita sudah mati kita tidak bisa begitu saja melewati

9
00:00:50,250 --> 00:00:58,350
prop untuk meng-stall tombol prop pilihan kita misalnya semua kecuali nama benar-benar terserah Anda dan kemudian memberikan nilai dalam

10
00:00:58,350 --> 00:01:01,080
hal ini keadaan ini tunjukkan orang.

11
00:01:01,080 --> 00:01:07,400
Jadi pada dasarnya keadaan yang penting bagi kami untuk mengubah gaya dan itu adalah untuk menunjukkan

12
00:01:07,440 --> 00:01:15,390
gaya orang karena sebelumnya kami mengubah gaya dan jika memblokir sekarang saya hanya untuk kata-kata adalah keadaan penting pada semua

13
00:01:15,470 --> 00:01:17,660
tombol gaya Prop 2 ini.

14
00:01:17,700 --> 00:01:26,010
Sekarang satu-satunya pertanyaan adalah bagaimana kita bisa menggunakan ini semua bagian dalam komponen tombol gaya kami untuk mengubah warna latar

15
00:01:26,010 --> 00:01:28,370
belakang atau untuk mengarahkan kios.

16
00:01:28,680 --> 00:01:35,190
Dan untuk itu kita bisa menggunakan fitur yang rapi tahun ini dengan back take adalah template literal itu

17
00:01:35,190 --> 00:01:38,090
javascript biasa yang pada akhirnya menciptakan string.

18
00:01:38,160 --> 00:01:43,640
Nah, itu adalah string di mana kita dapat menyuntikkan konten secara dinamis dengan sintaks khusus.

19
00:01:43,650 --> 00:01:48,160
Dan sekali lagi ini hanya JavaScript tidak ada hubungannya dengan reaksi.

20
00:01:48,210 --> 00:01:54,810
Anda dapat dengan tanda dolar dan kemudian dua kurung kurawal di sini ini memungkinkan Anda untuk memasukkan sesuatu secara

21
00:01:54,810 --> 00:01:58,230
dinamis ke dalam string panjang yang dibuat di sini.

22
00:01:58,230 --> 00:02:06,420
Dan di sini kita benar-benar bisa mendapatkan fungsi di mana kita menerima alat peraga dan kemudian kita harus mengembalikan nilai yang ingin

23
00:02:06,420 --> 00:02:13,580
kita render di tempat ini dan di sana kita dapat memeriksa apakah alat peraga semua yang merupakan alat peraga

24
00:02:13,590 --> 00:02:20,950
yang saya tambahkan di sana jika Anda ingat di sini semua jika Ayah pada akhirnya benar dalam kasus kita di

25
00:02:23,780 --> 00:02:30,690
sini atau tidak, jadi di sini kita dapat memeriksa alat peraga dengan ekspresi ternary apakah data itu benar.

26
00:02:30,710 --> 00:02:32,690
Di sini kita ingin memiliki latar belakang merah.

27
00:02:32,900 --> 00:02:38,190
Kalau tidak, kami ingin menjalankan greenback dari sebelum beberapa mengembalikan string di sini.

28
00:02:38,210 --> 00:02:45,690
Sekarang ekspresi dinamis ini di sini juga diteruskan ke metode spot dan belum secara otomatis oleh javascript.

29
00:02:45,770 --> 00:02:52,280
Dan ini juga merupakan pajak mendadak atau penggunaan literal templat ini yang dipahami oleh paket komponen gaya jika

30
00:02:52,280 --> 00:03:00,210
kita menyuntikkan fungsi tersebut ke string gaya ayah di sini paket komponen gaya akan melihatnya dan akan meneruskan alat peraga yang kami

31
00:03:00,260 --> 00:03:06,980
lewati ke tombol untuk fungsi itu sehingga kita bisa berharap itu sebagai argumen untuk fungsi itu di sini dan

32
00:03:06,980 --> 00:03:12,560
kemudian kita bisa menggunakan alat peraga di sini dan mengembalikan teks yang seharusnya menjadi output di

33
00:03:12,560 --> 00:03:16,180
sini dan yang harus digunakan dalam gaya dan yen.

34
00:03:16,400 --> 00:03:21,830
Dan karena itu sekarang jika kita menyimpan ini dan ini memuat kembali Anda melihat ini masih

35
00:03:21,830 --> 00:03:28,940
hijau tetapi jika Anda mengkliknya memiliki latar belakang merah dan ini semua dilakukan karena di bagian kepala jika kami memeriksa gaya kami

36
00:03:28,940 --> 00:03:36,890
lagi Anda lihat di sini kami mendapat persyaratan gaya kita lebih baik kembali pada warna hijau dan kita juga mendapat warna latar belakang merah di

37
00:03:36,890 --> 00:03:43,040
sini dengan tampilan yang berbeda mengatakan kelas itu agak sulit dibaca karena dioptimalkan dan dikompresi di sini tetapi

38
00:03:43,040 --> 00:03:45,880
di sini Anda melihat warna latar belakang merah.

39
00:03:46,340 --> 00:03:51,620
Dan di sana Anda melihat warna latar belakang hijau dan ini adalah CSF yang berbeda

40
00:03:51,620 --> 00:03:57,890
memiliki kelas pada akhirnya yang digunakan untuk menambahkan warna-warna ini dan paket komponen gaya hanya akan menukar kelas-kelas ini di

41
00:03:57,890 --> 00:04:03,800
sini jika Anda memeriksa tetapi kemudian menonton kelas di sebelah kanan akan bertukar kelas-kelas ini berdasarkan kondisi kami.

42
00:04:03,860 --> 00:04:08,570
Jadi itu semua tanda kutip ajaib yang dilakukan oleh paket itu.

43
00:04:08,660 --> 00:04:16,910
Dan tentu saja kita dapat menggunakan sintaks di sini tidak hanya di tempat ini tetapi juga menggunakannya di

44
00:04:16,970 --> 00:04:25,860
sini untuk memiliki Selman sebagai warna latar belakang atau hijau muda atau semua di sana warna yang saya gunakan sebelumnya hitam.

45
00:04:25,860 --> 00:04:27,060
Jadi itu tidak berubah.

46
00:04:27,120 --> 00:04:32,120
Jadi kita tidak perlu mengubahnya di sini kita tidak perlu menambahkan sintaks khusus ini di sini.

47
00:04:32,130 --> 00:04:37,860
Jadi dengan itu jika kita sekarang memuat ulang jika saya mengkliknya kita memiliki tombol merah dengan latar belakang Salmond

48
00:04:37,860 --> 00:04:42,840
jika saya mengarahkan kursornya atau kita tidak melihat orang memiliki tombol hijau dengan tombol hijau muda.

49
00:04:42,840 --> 00:04:50,070
Ini adalah komponen yang ditata dan komponen yang ditata adalah sebuah paket yang memberi kita cara yang sangat populer untuk menggabungkan

50
00:04:50,460 --> 00:04:58,850
CSX dan JavaScript di mana kita menulis CSX normal tetapi kita mencampurnya dengan sintaks javascript ini dan paket komponen yang diinstal kemudian melakukan semua

51
00:04:58,850 --> 00:05:04,920
keajaiban mengekstraksi ini dengan memasukkannya ke dalam a C as adalah kelas dan menambahkan kelas ini secara

52
00:05:05,070 --> 00:05:10,920
dinamis ke tombol ini yang tidak membuat metode tempat dalam kasus ini menciptakan dan kemudian kita dapat

53
00:05:10,920 --> 00:05:16,530
menggunakan ini di sini sebagai komponen reaksi reguler yang kebetulan memiliki beberapa gaya yang melekat

54
00:05:16,530 --> 00:05:16,970
padanya.

55
00:05:17,220 --> 00:05:23,100
Oleh karena itu komponen gaya pasti juga merupakan paket yang dapat saya sarankan agar Anda melihatnya

56
00:05:23,100 --> 00:05:25,350
jika Anda ingin menata komponen Anda.