Verileri HTML belgelerinizden ayırmanın en basit yollarından biri onu JSON'da depolamaktır. JSON popülerdir ve özellikle JavaScript'te çalışması kolaydır.

React'te JSON verilerini bir bileşen kullanarak tablolar aracılığıyla sunmak mantıklıdır. Bu bileşen, JSON verileriyle ölçeklenen bir tablo oluşturabilecektir. Elde edilen tablo, veriler sabit kodlanmadığından ihtiyaç duyduğu kadar satıra sahip olabilir.

Neye ihtiyacınız olacak

Bu öğreticiyi takip etmek ve React'in nasıl çalıştığına dair temel bir anlayışa sahip olmak için makinenizde Node.js'nin kurulu olması gerekir.

Tabloyu oluşturmadan önce yapmanız gerekenler yeni bir React projesi oluştur eğer bir tane yoksa.

JSON Verilerini Oluşturma

Tablo, bir JSON dosyasında depolanan verileri kullanacaktır. Eğer olabilir bu verileri bir API uç noktasından getir gerçek hayattaki bir uygulamada.

src klasöründe, adlı yeni bir dosya oluşturun. veri.json ve aşağıdakileri ekleyin:

[{
"İD": 1,
"ilk adı": "Ethelred",
"Soyadı": "yavaşça",
"e-posta": "[email protected]





instagram viewer


"
},{
"İD": 2,
"ilk adı": "ret",
"Soyadı": "Yünlü",
"e-posta": "[email protected]"
},{
"İD": 3,
"ilk adı": "Arabel",
"Soyadı": "zararlı",
"e-posta": "[email protected]"
}]

Bu, üç nesne içeren basit bir JSON dosyasıdır.

Nesne anahtarları (id, ad, soyad ve e-posta) başlıklardır, karşılık gelen özellikleri ise tablonun gövdesini oluşturur.

Tablo Bileşenini Oluşturma

adlı yeni bir dosya oluşturun. tablo.js src klasörüne aşağıdaki kodu ekleyin.

ihracatvarsayılanişlevMasa({theadData, tbodyData}) {
dönüş (
<masa>
<kafa>
<tr>
// üst bilgi satırı
</tr>
</thead>
<vücut>
// gövde verileri
</tbody>
</table>
 );
}

Bu bileşen, sahne olarak theadData ve tBodyData'yı alır. theadData, başlık satırında görüntüleyeceğiniz verileri içerir. Uygulama, bu verileri JSON dosyasından alacak ve Tablo bileşenine teslim edecektir.

içinde bir işlev oluşturun App.js getHeadings() olarak adlandırılır ve aşağıdakileri ekleyin.

const getHeadings = () => {
dönüşNesne.keys (veri[0]);
}

JSON dosyasındaki her nesnenin anahtarları benzer olduğundan, ilk nesnedeki anahtarları kullanabilirsiniz.

Data.json'u App.js'ye almayı unutmayın.

içe aktarmak veri itibaren "./veri.json"

Tablo bileşenini oluşturduğunuzda, başlığı ve JSON verilerini props olarak iletin.

<Tablo theadData={getHeadings()} tbodyData={data}/>

Başlık Satırını Oluşturma

Bu adımda, başlık satırındaki bir öğeyi oluşturmak için bir bileşen oluşturacaksınız. Bu bileşen, map() yöntemini kullanarak başlıklar üzerinde yinelenir.

Table.js'de, thead etiketinin içindeki başlıklar üzerinde yinelenecek kodu ekleyin.

<tr>
 {theadData.map (başlık => {
 dönüş <th tuşu={başlık}>{başlık}</th>
 })}
</tr>

Ardından, tablonun gövdesini dolduracaksınız.

Gövde Satırlarını Oluşturma

Tablo gövdesi satır verilerini işler. Table.js, verileri bir dizi nesne olarak aldığından, her nesnenin bir satırı temsil etmesini sağlamak için önce bunun üzerinde yineleme yapmanız gerekir.

Bu nedenle, Table.js'de tBodyData prop üzerinde şu şekilde yineleyin:

<vücut>
 {tbodyData.map((satır, dizin) => {
 dönüş <tr tuşu={indeks}>
// satır verileri
</tr>;
 })}
</tbody>

Her satır nesnesi, aşağıdaki nesne örneğine benzer olacaktır.

const satır = {
"İD": 1,
"ilk adı": "Ethelred",
"Soyadı": "yavaşça",
"e-posta": "[email protected]"
}

Bu öğelerin her birini görüntülemek için nesnenin tuşları üzerinde yineleme yapmanız gerekecektir. Her yinelemede, satır nesnesindeki o anahtarla eşleşen özelliği alırsınız. Bu anahtarlar başlıklarla aynı olduğundan, theadData prop'daki değerleri kullanın.

Aşağıda gösterildiği gibi satır verilerini görüntülemek için tr etiketini değiştirin.

<tr tuşu={indeks}>
// theadData anahtarları içerir
 {theadData.map((anahtar, dizin) => {
 dönüş <td tuşu={satır[anahtar]}>{satır[anahtar]}</td>
 })}
</tr>;

Her şeyi bir araya getiren Tablo bileşeni şöyle görünmelidir:

ihracatvarsayılanişlevMasa({theadData, tbodyData}) {
dönüş (
<masa>
<kafa>
<tr>
 {theadData.map (başlık => {
 dönüş <th tuşu={başlık}>{başlık}</th>
 })}
</tr>
</thead>
<vücut>
 {tbodyData.map((satır, dizin) => {
 dönüş <tr tuşu={indeks}>
 {theadData.map((anahtar, dizin) => {
 dönüş <td tuşu={satır[anahtar]}>{satır[anahtar]}</td>
 })}
</tr>;
 })}
</tbody>
</table>
);
}

İçinde

eleman, bileşen veri dizisi üzerinde yinelenir ve her nesne için tablo satırını döndürür.

Tablo Bileşenini Kullanma

Tabloyu App.js'ye içe aktarın ve aşağıda gösterildiği gibi oluşturun:

içe aktarmak Masa itibaren './Masa';
içe aktarmak veri itibaren "./veri.json"
işlevUygulama() {
const getHeadings = () => {
dönüşNesne.keys (veri[0]);
 }
dönüş (
<div sınıfıAdı="konteyner">
<Tablo theadData={getHeadings()} tbodyData={data}/>
</div>
 );
}
ihracatvarsayılan Uygulama;

Tablo bileşeni, sahne olarak theadData ve tbodyData öğelerini alır. theadData, JSON verilerindeki ilk öğenin anahtarlarından oluşturulan başlıkları içerir ve tbodyData, JSON dosyasının tamamını içerir.

CSS Modülleriyle Şekillendirme

Bu öğreticide bir JSON dosyasından bir React tablosu bileşeni oluşturdunuz. Ayrıca JSON verilerini ihtiyaçlarınıza göre nasıl değiştirebileceğinizi de öğrendiniz. Tablonuza biraz CSS ekleyerek görünümünü iyileştirebilirsiniz. Yerel kapsamlı CSS stilleri oluşturmak için CSS modüllerini kullanmayı düşünün. Bir create-tepki-app uygulaması kullanıyorsanız, kullanımı basit ve başlaması kolaydır.