Asas Props: Bahagian 1

Ini ialah tutorial mesra pemula tentang cara menggunakan prop. Adalah penting untuk anda memahami apa itu pemusnahan dan cara menggunakan / mencipta komponen sebelum membaca.

Props, singkatan untuk properties, props membolehkan kami menghantar maklumat daripada komponen induk kepada komponen anak, ia juga penting untuk ambil perhatian bahawa ia boleh menjadi sebarang jenis data.

Adalah penting untuk memahami bahawa sintaks untuk mencipta prop untuk mana-mana komponen anda. Dalam React, anda mesti menggunakan sintaks yang sama untuk menulis atribut untuk teg html. Cara kami menentukan prop adalah dengan meletakkannya dalam elemen kami seperti ini:

ParentPlant() {
  return <ChildPlant text="Hey Farmer! Says plant" number={2} isPlant={true} /> 
}

Peraturan yang baik untuk diingat semasa membuat Props ialah: rentetan tidak perlu mempunyai pendakap kerinting di sekeliling nilainya, kami hanya melakukan ini untuk jenis data lain. Seperti yang anda lihat di atas, kita boleh mempunyai banyak prop dengan memberikannya kepada komponen induk. Apabila kami mempunyai prop kami dalam komponen kami, adalah penting untuk mengetahui bahawa kami secara teknikal meninggalkannya. Sebaik sahaja kami menurunkan prop kami, kami perlu dapat menerimanya dalam komponen yang kami kehendaki. Dalam kes ini komponen ChildPlant kami.

Prop Menerima:

function ChildPlant(props) {
  return (
    <>
      {props.text} {props.number}
    </>
  )
}

Kami melakukan perkara di sini: 1. Kami menerima prop kami dalam parameter komponen ChildPlant kami, 2. Kami memusnahkan nilai prop kami melalui nama prop kami. Adalah penting untuk mengetahui bahawa prop kami bukan parameter tetapi lebih-lebih lagi berfungsi serupa dengan satu.

Satu-satunya cara untuk menghantar data komponen induk kepada komponen anak adalah melalui prop. Saya suka menganggapnya seperti DNA, komponen induk memegang aspek dirinya yang sudah sedia ada di dalamnya. Oleh kerana kanak-kanak itu juga boleh mempunyai aspek DNA ibu bapanya, prop berfungsi seperti pengaktif yang menjadikan rambut kanak-kanak itu merah, hitam atau berambut perang.

Props diterima dalam fungsi anak dan dihantar melalui fungsi induk, tetapi prop hanya boleh dihantar ke bawah dan tidak pernah dihantar semula. Kita boleh menganggap prop sebagai objek juga. Ini kerana mereka pada asasnya menyimpan data di dalamnya serupa dengan pasangan kunci:nilai. Untuk menyentuh kembali mengapa ia serupa dengan parameter ialah mereka menyimpan berbilang objek di dalamnya. Saya suka memikirkan kawasan di mana prop diterima sebagai ruang letak. Mereka mengambil ruang untuk beberapa objek yang ingin kami kongsikan dengan komponen kami dan menukarnya apabila kami memerlukannya, melalui penstrukturan dan notasi titik.

Berikut ialah cara yang baik untuk menggambarkannya:

Di sini kita boleh memvisualisasikan prop yang memegang segala-galanya dalam kotak persegi kita, setiap satu memegang nilai data masing-masing daripada contoh pertama kami. Sekarang kami hanya menggunakan kaedah pemusnahan kami untuk meraih nilai prop kami. Dan begitulah cara menggunakan prop secara ringkas!

Atas ialah kandungan terperinci Asas Props: Bahagian 1. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!