Working with Lists and Using Keys in React

 Ka Shaqeynta Liisaska iyo Isticmaalka Keys ee React

React waa maktabad awood leh oo loogu talagalay dhisidda interfaces-ka isticmaaleha (UI) iyadoo loo adeegsanayo components. Mid ka mid ah hawlaha muhiimka ah ee React waa ka shaqeynta liisaska (lists) iyo isticmaalka keys si loo maareeyo waxyaabaha ku jira liisaska. Maqaalkan, waxaan ku eegi doonaa sida loo abuuro liisaska, sida loo isticmaalo keys, iyo sababta ay muhiim u yihiin.

1. Liisaska ee React

Working with Lists and Using Keys in React
Working with Lists and Using Keys in React


Liisaska waxaa loo isticmaalaa in lagu muujiyo ururin xog ah, sida liisaska dadka, alaabada, ama waxyaabaha kale ee la midka ah. React waxay leedahay qaab sahlan oo lagu abuuro liisaska iyadoo la adeegsanayo map() method.

a. Tusaale Liis

Tusaale ahaan, waxaan sameyn karnaa liis dadka ah oo aan ku muujin karno magacyadooda:

javascript

import React from 'react';

const people = ['Alice', 'Bob', 'Charlie'];

const PeopleList = () => {
  return (
    <ul>
      {people.map((person, index) => (
        <li key={index}>{person}</li>
      ))}
    </ul>
  );
};

export default PeopleList;

2. Isticmaalka Keys

Marka aad abuurto liisaska, React waxay u baahan tahay keys si ay u ogaato waxyaabaha gaarka ah ee liiska. Keys waxay caawiyaan React in ay si hufan u maareyso isbeddelada, ku darista, iyo ka saarista waxyaabaha liiska. Waxay sidoo kale ka hortagtaa dhibaatooyinka la xiriira muujinta xogta.

a. Maxay Tahay Key?

Key waa astaanta gaarka ah ee la siiyo walxaha ku jira liisaska. Waxay caawisaa React in ay aqoonsato walxaha si ay u maareyso waxyaabaha si hufan.

b. Sidee Loogu Isticmaalaa Keys?

Marka aad abuurto liis, waxaa muhiim ah in aad siiso walxahaaga key. Waxaa habboon in aad isticmaasho aqoonsiyo gaar ah sida IDs halkii aad ka isticmaali lahayd index-ka liiska, sababtoo ah isbeddelada qaarkood waxay saameyn karaan index-ka, taas oo keeni karta in React ay ku adkaato in ay ogaato walxaha.

Tusaale ahaan, haddii aan hayno liiska dadka oo leh IDs, waxaan u isticmaali karnaa:

javascript

const people = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const PeopleList = () => {
  return (
    <ul>
      {people.map(person => (
        <li key={person.id}>{person.name}</li>
      ))}
    </ul>
  );
};

3. Sababta Ay Muhiim U Yihiin Keys

Keys waa muhiim sababo dhowr ah:

  • Hufnaan: Keys waxay caawiyaan React in ay aqoonsato waxyaabaha ku jira liiska, taas oo hagaajineysa waxqabadka.
  • Isbeddelada: Haddii aad ku darto, tirtirto, ama beddesho walxo liiska, React waxay si sahlan u maareyn kartaa isbeddelada iyadoo la adeegsanayo keys.
  • Ka Hortagga Dhibaatooyinka: Isticmaalka keys si habboon waxay ka hortagtaa dhibaatooyinka muujinta, sida dib-u-soo-kabashada state-ka.

4. Tusaalaha Real-World

Marka aad ka shaqeynayso barnaamijyo weyn, sida liisaska alaabada ama waxyaabaha kale, waxaa muhiim ah in la isticmaalo keys si sax ah. Tusaale ahaan:

javascript

import React from 'react';

const products = [
  { id: 101, name: 'Laptop', price: 999 },
  { id: 102, name: 'Phone', price: 499 },
  { id: 103, name: 'Tablet', price: 299 }
];

const ProductList = () => {
  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>
          {product.name} - ${product.price}
        </li>
      ))}
    </ul>
  );
};

export default ProductList;

Gunaanad

Ka shaqeynta liisaska iyo isticmaalka keys waa arrimo aasaasi ah oo muhiim ah marka aad dhiseyso components React. Isticmaalka saxda ah ee keys waxay ka caawisaa React in ay si hufan u maareyso waxyaabaha liiska, taas oo keenta waxqabad wanaagsan iyo khibrad isticmaale oo wanaagsan. Hubi inaad had iyo jeer siiso walxahaaga keys marka aad abuurayso liisaska React.

Tags
Previous Post Next Post