Siyahı və Açarlar

Gəlin JavaScript-də siyahıları çevirməyi nəzərdən keçirək.

Göstərilən kodda map() funksiyasından istifadə edərək rəqəmlər (numbers) massivinində olan dəyərləri iki dəfə artırırıq. map()-dən qaytarılan yeni massivi doubled dəyişəninə təyin edib bu massivi çap edirik:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);console.log(doubled);

Bu kod konsola [2, 4, 6, 8, 10] çap edir.

React-də, massivləri elementlər siyahısına çevirmək eyni formada icra olunur.

Bir Neçə Komponentin Render Edilməsi

Siz elementlər kolleksiyaları yaradıb fiqur mötərizəsindən istifadə edərək JSX-ə daxil edə bilərsiniz.

Aşağıdaki kodda, map() funksiyasından istifadə edərək numbers massivindən keçirik. Biz massivin hər bəndi üçün <li> elementi qaytarırıq. Ən sonda, qaytarılan elementlər massivini listItems dəyişəninə təyin edirik:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>  <li>{number}</li>);

listItems massivini <ul> elementinə daxil edərək siyahını DOM-a render edirik:

<ul>{listItems}</ul>

CodePen-də sınayın

Bu kod 1-dən 5-ə kimi rəqəmləri nöqtəli siyahıda göstərir.

Sadə Siyahı Komponenti

Adətən siyahılar komponentin daxilində render edilir.

Əvvəkli nümunəni redaktə edib numbers massivi qəbul edən və elementlər siyahısı render edən komponentə çevirə bilərik.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>    <li>{number}</li>  );  return (
    <ul>{listItems}</ul>  );
}

const numbers = [1, 2, 3, 4, 5];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NumberList numbers={numbers} />);

Bu kodu icra etdikdə, siyahı elementlərinin açarları olması haqqında xəbərdarlıq göstəriləcək. Elementlər siyahısı düzəltdikdə, xüsusi mətn atributu olan “key” (açar) atributunu daxil etməlisiniz. Gələcək bölmədə bu atributun əhəmiyyətindən danışacağıq.

Gəlin numbers.map()-in daxilində olan siyahı elementlərinə key atrubutunu təyin edib açar əskikliyi problemini aradan qaldıraq.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

CodePen-də sınayın

Açarlar

React-də açarlardan istifadə edərək elementlərin dəyişildiyini, əlavə edildiyini və ya silindiyini müəyyənləşdirmək mümkündür. Massivdə olan elementlərə sabit identiklik verə bilmək üçün hər elementə açar verilməlidir:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>    {number}
  </li>
);

Elementi, siyahıda olan digər elementlərdən unikal şəkildə fərqləndirən mətn seçmək açarı seçməyin ən yaxşı yoludur. Adətən, məlumatda olan ID-lər açar kimi işlənilir:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>    {todo.text}
  </li>
);

Əgər sizdə render olunan elementlər üçün sabit ID yoxdursa, son çarə kimi elementin massiv indeksini açar kimi istifadə edə bilərsiniz:

const todoItems = todos.map((todo, index) =>
  // Yalnız sabit ID olmadıqda indeksdən istifadə edin  <li key={index}>    {todo.text}
  </li>
);

Elementlərin sırası dəyişirsə, massiv indekslərini açar kimi işlətməyi tövsiyə etmirik. Bu performansa ziyan vura və komponent state-ində problemlər yarada bilər. İndeksi açar kimi işlədikdə yaranan problemlər haqqında dərin izahat üçün Robin Pokorninin məqaləsini oxuyun. Siyahı elementlərinə açıq formada açar təyin edilmədikdə, React massiv indekslərini açar kimi işlədəcək.

Əlavə məlumat üçün açarların vacibliyi haqqında dərin izahatı sənədini oxuya bilərsiniz.

Açarlı Komponentlərin Çıxarılması

Açarlar yalnız daxil olduğu massivin kontekstində məntiqlidir.

Məsələn, ListItem komponentini çıxardıqda, açarları ListItem komponentlərində yerləşən <li> elementləri əvəzinə <ListItem /> elementlərinə təyin edin.

Nümunə: Açarın Səhv İstifadəsi

function ListItem(props) {
  const value = props.value;
  return (
    // Səhv! Burada açar təyin etmək lazım deyil:    <li key={value.toString()}>      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Səhv! Açar burada təyin edilməlidir:    <ListItem value={number} />  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

Nümunə: Açarın Düzgün İstifadəsi

function ListItem(props) {
  // Düzdür! Burada açar təyin etmək lazım deyil:  return <li>{props.value}</li>;}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Düzdür! Açar, massivin daxilində təyin edilməlidir.    <ListItem key={number.toString()} value={number} />  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

CodePen-də sınayın

Bir qayda kimi, açarları map() çağırışının daxilində olan elementlərə təyin edə bilərsiniz.

Qonşular Arasında olan Açarlar Unikal Olmalıdır

Massivdə olan açarlar qonşu elementlər arasında unikal olmalıdır. Lakin, bu açarlar bütün applikasiyada unikal olmamalıdırlar. Biz iki fərqli massivdə eyni açarları istifadə edə bilərik:

function Blog(props) {
  const sidebar = (    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>    <div key={post.id}>      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}      <hr />
      {content}    </div>
  );
}

const posts = [
  {id: 1, title: 'Salam Dünya', content: 'React-i Öyrənməyə Xoş Gəlmisiniz!'},
  {id: 2, title: 'Yükləmə', content: 'npm ilə React-i yükləyə bilərsiniz.'}
];

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Blog posts={posts} />);

CodePen-də sınayın

Açarlar React-də bir ipucu kimi istifadə edildiyi üçün komponentlərə göndərilmir. Əgər açar ilə göndərilən dəyər komponentdə lazımdırsa, bu dəyəri fərqli ad ilə əlavə prop kimi göndərmək lazımdır:

const content = posts.map((post) =>
  <Post
    key={post.id}    id={post.id}    title={post.title} />
);

Göstərilən nümumədə, Post komponenti props.id-ni oxuya bilir. Lakin, props.key-i oxuya bilmir.

map() Funksiyasını JSX-ə Daxil Edin

Yuxarıdakı nümunələrdə, biz massivləri ayrı listItems dəyişəninə təyin edib, bu dəyişəni JSX-ə daxil edirdik:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>    <ListItem key={number.toString()}              value={number} />  );  return (
    <ul>
      {listItems}
    </ul>
  );
}

JSX, fiqur mötərizədə hər bir ifadəni daxil etməyə icazə verdiyindən biz map()-in nəticəsini eyni sətrdə JSX-ə daxil edə bilərik:

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>        <ListItem key={number.toString()}                  value={number} />      )}    </ul>
  );
}

CodePen-də sınayın

Bu stilin təmiz kod ilə nəticələnməsinə baxmayaraq, bu stili çox istifadə etmək ziyanlı ola bilər. JavaScript-də olduğu kimi, oxunuşu artırmaq üçün dəyəri dəyişənə çıxarmaq sizdən asılıdır. Əgər map() çağırışının gövdəsi çox iç-içədirsə, komponenti çıxarmaq yaxşı fikir ola bilər.