React-dəki massivlərdən necə təkrarlanır

Tipik olaraq, hər hansı bir veb tətbiq qurarkən, müxtəlif məlumatlarla məşğul olmalısınız. Bu yazıda, özünüzlə götürə biləcəyiniz və öz veb tətbiqlərinizdə istifadə edə biləcəyiniz real dünya nümunələrindən istifadə edərək bir sıra məlumatlar üzərində təkrarlamaq üçün ən yaxşı təcrübələrdən necə istifadə edəcəyinizi göstərmək istəyirəm.

Daha əvvəl xəritə funksiyasından istifadə etdinizmi?

Map () metodu, çağırış massivindəki hər bir element üçün təmin olunmuş funksiyanın çağırılması ilə yeni bir sıra yaradır.

Buna görə, xəritə funksiyası ES2015-də Javascript-də təqdim edildi. Bu, loop prosesini xeyli asanlaşdırır və loop və ya forEach funksiyaları üçün sadə istifadə ehtiyacını aradan qaldırır. İndi for loop, forEach və map arasında bəzi fərqlər var, ancaq buraya girməyəcəyik. React sənədləri, sadəcə sadəliyi üçün deyil, mövcud məlumatları dəyişdirməyə / yazmağa çalışmaqdansa, məlumatlardan yeni bir sıra yaratdığına görə xəritə funksiyasından istifadə etməyi şiddətlə tövsiyə edir.

Bu ikinci məqam çox vacibdir. Xəritə xüsusiyyətlərindən necə istifadə edəcəyinizdən əmin deyilsinizsə, lütfən xəritələr, filtrlər istifadə edərək bu məqaləni oxumaq üçün bir az vaxt ayırın.

Alış-veriş sepetindəki bir sıra əşyaların arasından keçin

Təsəvvür edək ki, paltar satan bir e-ticarət saytı qururuq. Tətbiqimiz, ehtimal ki, əşyaların əlavə ediləcəyi bir səbətə sahib olacaqdır. Beləliklə, alışveriş sepetimiz əvvəlcə belə görünür.

shoppingCart-a icazə verin = [];

Bəzi maddələr əlavə etdikdən sonra belə görünə bilər:

shoppingCart-a icazə verin = [
{id: 35, maddə: 'tullanan', rəng: 'qırmızı', ölçü: 'orta', qiymət: 20},
{id: 42, maddə: 'köynək', rəng: 'mavi', ölçü: 'orta', qiymət: 15},
{id: 71, maddə: 'çorap', rəng: 'qara', ölçü: 'hamısı', qiyməti: 5},
]

İndi istifadəçi sifariş verdiyini görə bilməsi üçün bu əşyaları alışveriş sepeti səhifəmizdə göstərmək istəyirik. Gəlin bununla mübarizə aparmaq üçün çox oxşar iki yolu görək.

Tətbiq sinfi konstruktorumuzda this.items yaradırıq və this.state.cart-a təyin edirik. Sonra bu vəziyyət səbətindəki fərdi elementlərdən keçmək üçün ES2015 xəritə funksiyasından istifadə edirik.

Xəritə funksiyamıza iki parametr ötürürük. İlk element sadəcə this.state.cart massivimizdəki tək bir elementə uyğundur. İkincisi, göstəricinin hər bir elementi izləməsinə kömək etmək üçün React-in istifadə etdiyi əsas məqamdır. Gördüyünüz kimi, this.state.cart-da bir açar təyin etmədik. Sadəcə xəritə funksiyamızda item.id-ə istinad edərək maddənin kimliyini açar kimi ötürürük. Hər halda, sonra daxil oluruq İçərisində {item.name} ilə etiketləyin.

Kodun bu hissəsinin necə tamamlandığına qısa bir nəzər salaq:

this.items = this.state.cart.map ((maddə, açar) => {item.name} );

Daha sonra kodumuzda istifadə etmək istəyiriksə, yalnız xaricini yaradırıq Bu maddələri etiketləyin və əlavə edin.

    {this.items}

Və bu şəkildə, səbətimizdəki hər bir şey bizim tərəfimizdən bənzərsiz sayılır Maddə göstərildi.

Bununla məşğul ola biləcəyimiz ikinci yol çox oxşardır və bəlkə də bizə bir az daha yaxındır.

This.item kod blokumuzu sinif qurucusuna qoymaq əvəzinə, yuxarıdakı render () funksiyamıza qoymuş ola bilərik:

render () {const items = this.state.cart.map ((item, key) => {item.name} );

Bu, daha ənənəvi const sintaksisindən istifadə etməyimizə imkan verir (və ya istəsəniz var və ya icazə verin).

Bunu etdikdə, bunun əvəzinə bunu yaza biləcəyimiz deməkdir:

    {Məhsullar}

İndi bəzi insanlar render () funksiyasını qarışdırmamalı olduğunuzu mübahisələndirəcəklər, ancaq olduqca sadə və inanılmaz dərəcədə mürəkkəb olmayan bir şey yazırsınızsa (burada minlərlə və minlərlə kod sətirlərindən bəhs edirəm), bunun həqiqətən heç bir əhəmiyyəti yoxdur. Buna görə sizin üçün daha rahat olan marşrutu seçməyinizi məsləhət görürəm. React ilə davam edərkən, layihənizə ən uyğun bir stil tapacaqsınız.

Tamam, buna görə siyahıları döngələrlə necə göstərəcəyimizi bilirik. Ancaq bir çox uşaq komponentini çıxarmaq üçün məlumat üzərində təkrarlamaq istəsək nə etməli? Bunu necə edə bilərik?

Əslində bu olduqca sadə və əvvəllər etdiyimizə çox oxşayır.

Gəlin təsəvvür edək ki, mağazamızda aşağıdakı məhsullar var:

Ticarət: [{id: 35, ad: 'tullanan', rəng: 'qırmızı', qiymət: 20}, {id: 42, ad: 'köynək', rəng: 'mavi', qiymət: 15}, {id: 56, ad: 'şalvar', rəng: 'yaşıl', qiymət: 25}, {id: 71, ad: 'corab', rəng: 'qara', qiymət: 5}, {id: 72, ad: 'corab ', rəng:' ağ ', qiyməti: 5},]

Və sizə daha aydın bir şəkil vermək üçün bu mağaza bu dövlətin içərisində, bir konstruktorun içində var. Hər şey belə görünür:

Sinif tətbiqinin genişləndirilmiş komponenti {konstruktor (rekvizit) {super (rekvizit); this.state = {avtomobil: [], dükan: [{id: 35, ad: 'tullanan', rəng: 'qırmızı', qiymət: 20}, {id: 42, ad: 'köynək', rəng: 'mavi ', qiymət: 15}, {id: 56, ad:' şalvar ', rəng:' yaşıl ', qiymət: 25}, {id: 71, ad:' corab ', rəng:' qara ', qiymət: 5} , {id: 72, ad: 'çorap', rəng: 'ağ', qiymət: 5},]}}

Beləliklə mağazamızda əşyalar var və indi Item.js. adlandıracağımız bir alt komponent yaratmaq istəyirik. Bütün komponent faylı belə görünür:

idxal React, {Component} 'reaksiyadan'; sinif elementi Bileşeni genişləndirir {render () {return ( {this.props.item.name} {this.props.item.color} $ {this.props.item.price} ); }} Standart məqalələri ixrac et;

Əmin deyilsinizsə, ana komponentin içindən çağırdığımız zaman uşaq komponentinə this.State.Item ötürdüyümüz üçün this.Props.Item deyirik. Bu biraz qəribə səslənə bilər, ancaq özünüzlə götürün və bir an içində mənası olacaq!

Döngəyə qayıdıb mağazamızdakı əşyaların üstünə təkrarlamaq üçün belə yazardıq:

Satışda olan məhsul

{this.state.shop.map ((maddə, açar) => )}

Gördüyünüz kimi, demək olar ki, əvvəllər istifadə etdiyimiz eyni konsepsiya. Yeganə fərq ondan ibarətik ki -İndi indi - Etiketləri çap edin - bu əvvəllər qeyd etdiyimiz Item.js komponentidir! Bu qədər sadə!

Item.js komponentinin içərisində this.props.item adlandırırıqsa, bu bir istinaddır , daha doğrusu maddə = {maddə}. Buna görə bu məhsulu = {item} adlandırdığımız zaman bunun əvəzinə this.props.product-a istinad edirik. Mənada?

Bütün funksiyaları buruq mötərizələrə əlavə etməli olduğumuzu görmüş ola bilərsiniz {}. Bu, React-in sadəcə düz mətn verməməyi deyil, bir funksiyanı ifadə etməyə çalışdığınızı başa düşməsi üçün lazımdır.

Başqa bir qeyd budur ki, üç fərqli məlumat ötürmə metodunun hamısı dəyişdirilə bilər. Beləliklə, bir dəstə uşaq komponenti üzərində təkrarlamaq istəyirsinizsə, lakin göstərdiyimiz ilk metodu seçsəniz, edə bilərsiniz! Nəticədə hər şey normal Javascriptdir!

React-dəki ən son Javascript texnikalarını istifadə edərək massivləri təkrarlamaq üçün istifadə edə biləcəyiniz üç güclü metod göstərdik. İndi bəzi yeni veb tətbiqetmələr yaratmaq üçün bu yeni məlumatları istifadə edin!