Bu bölümde renderdaki yerel erişim döngüsünü açıklamak için bir dizi kullanacağız. Bunun için renderda bir reaksiyon döngüsü dizisi örneği anlattık. Herhangi bir web uygulaması oluşturmak istediğimizde, bir dizi veriyi yönetme bilgisine sahip olmak çok önemlidir. Bu örnekte döngü kullanımını göreceğiz. tepki . Verilen örneğimizde, react js'de for döngüsünü kullanacağız. Bunu gerçekleştirmek için bazı adımları takip etmemiz gerekiyor.
Bu bölümde react uygulamasını kullanacağız. Bir haritaya, foreach döngüsüne ve reaksiyonda for döngüsüne ihtiyaç duyduğumuzda, döngü dizisi n react js'nin kullanımını öğrenmek için aşağıdaki örneğe bakabiliriz. Dizide her zaman for döngüsü ve foreach döngüsünü isteriz. Dizimizi ulaşılabilir bir şekilde döngüye almak istediğimizde, bunu yapmak için bir haritaya ihtiyaç duyacaktır. Bu yüzden react native'de bir harita örneğini açıklayacağız. Map() yöntemiyle yeni bir dizi oluşturulur. Çağıran dizide, her bir öğe üzerinde bir işlevin çağrılmasının sonucunu sağlar. Döngü süreci bu şekilde basitleştirilebilir. Haritayı kullanırken forEach fonksiyonunun ve for döngüsünün kullanımına gerek duymayız. Map, forEach döngüsünün, for döngüsünün birçok farklılığı vardır. Harita işlevi, mevcut verilerin üzerine yazmak yerine verileri kullanır ve yeni bir dizi oluşturur. Harita fonksiyonunun tüm özellikleri ve basitliği nedeniyle React dokümanları harita fonksiyonunu kullanmamızı şiddetle tavsiye etmektedir.
Bu kolay konsepti açıklamak için react uygulamasında iki örnek sunacağız. İlk örnekte tek boyutlu diziye sahip reaksiyon döngüsünü anlatacağız. İkinci örnekte çok boyutlu diziye sahip bir döngüyü anlatacağız. Her iki örnek de aşağıdaki gibidir:
Örnek 1:
rc/App.js
import React from 'react'; function App() { const myArray = ['Jack', 'Mary', 'John', 'Krish', 'Navin']; return ( <table class="table"> <tr> <th>ID</th> <th>Name</th> <th>Email</th> </tr> {students.map((student, index) => ( <tr> <td>{student.id}</td> <td>{student.name}</td> <td>{student.email}</td> </tr> ))} </table> ); } export default App; Bu örneği çalıştırdıktan sonra aşağıdaki önizlemeyi elde edeceğiz:
