لیستەکان و کییەکان

یەکەم جار، با پێداچوونەوە بکەین لەسەر گۆڕانکاری کردنی لیستەکان لە جاڤاسکریپتدا.

سەیرێکی ئەم کۆدەی خوارەوەبکە، فەکشنی ()map مان بەکارهێناوە بۆ وەرگرتنی نرخەکانی ئەڕەی نەمبەرس وە دوو ئەوەنە کردنی نرخەکانی، ئەڕەیەکی تازەمان ناساندوە بەناوی دەبڵید
ئەو نرخانەی فەکشنی ()map دەیگەڕێنێتەوە دەیانخەینە ناو ئەڕەیە تازەکە بۆ ڤاریبڵی دەبڵد پاشان لۆگی دەکات.

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

ئەم کۆدە ئەمە لۆگ دەکات [2, 4, 6, 8, 10] لە کۆنسڵ.

لە ڕیاکتدا ، گواستنەوەی ئەڕەیەکان بۆ کۆمەڵە لیستێک لە ئیلیمێنتەکان بە نزیکەی باسی لێوە کرا.

ڕێندەرکردنی زیاد لەیەک کۆمپۆنێنت

دەتوانی کۆمەڵێک لە ئیلیمێنت دروستبکەی وە بیانکەی بە بەشێک لە JSX بە بەکارهێنانی کەوانەی لوول {}.

لەخوارەوە، لووپ دەکەین بەناو ئەڕەی نەمبەرس بە بەکارهێنانی فەکشنی ()map لە جاڤاسکریپتدا، هەر ئیلیمێنتێک لە <li> دەگەڕێتەوە لەکۆتایدا، ئیلیمێنتەکانی ناو ئەڕەیەکە دەخەینە ناو listItems.

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

ئەڕەی listItems دەخەینە ناو ئیلیمینتی <ul>، پاشان ڕێندەر دەکرێت لە DOM دا.

ReactDOM.render(
  <ul>{listItems}</ul>,  document.getElementById('root')
);

تاقیبکەرەوە لە کۆد پێن

ئەم کۆدە لیستێک لە ژمارە پیشان دەدا لە بەینی 1 و 5

کۆمپۆنێنتێکی سادەی لیست

زۆربەی کات باشترە لیستێک ڕێندەر کەیت لە ناو کۆمپۆنێنتێکا.

دەتوانین نموونەکەی پێشوو بنیاد بنێینەوە بیکەین بە کۆمپۆنێنتێک ئەڕەی پەسەندکا کە ژمارەی تێدابێت وە لیستێک لە ئیلیمێنتەکانی پیشاندا.

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];
ReactDOM.render(
  <NumberList numbers={numbers} />,  document.getElementById('root')
);

کاتێک ئەم کۆدە ڕەن دەکەیت، ئاگاداریەک وەردەگریت کە ئەڵێت ئاتیمەکانی لیستەکە پێویستە کیی یان هەبێت.کی تایبەتمەندیەکە کە نرخەکەی پیت یان ژمارەی بێ وێنەیە کاتێک لیست لە ئیلیمێنت دروست دەکەیت پێویستە هەیان بێت.گفتوگۆی لەسەر دەکەین کە بۆچی کی گرنگە لە بەشی داهاتوودا.

با بە دانانی کی بۆ ئایتمەکانی لیستەکەمان لەناو ()numbers.map کێشەی نەبوونی کی چارەسەر بکەین.

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

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

تاقیبکەرەوە لە کۆد پێن

کییەکان

کییەکان یارمەتی ڕیاکت دەدەن کە بزانێت چی ئاییتمێک گۆڕانکاری بەسەر هاتووە، زیاد کراوە یاخود سڕاوەتەوە.

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

باشترین ڕێگا بۆ دەستنییشانکردنی کی بەکارهێنانی پیت یان ژمارەی بێ وێنەیە کە ناسێنەری ئایتمێکی لیستەکەیە لە نێوان ئاتمەکان. زۆربەی کات ئایدیەکانی ناو داتابەس وەکو کی بەکاردێت.

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

کاتێک ئایدیەکی جێگیرت نییە دەتوانی ئیندێکسی ئایتمەکە بەکار بێنیت وەکو کی.

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs  <li key={index}>    {todo.text}
  </li>
);

ئێمە پێشنیاری ئەوە ناکەین ئیندێکس بەکار بێنیت وەکو کی چونکە گەر جێگۆرکێیان بەسەرا بێت، ئەنجامی خراپی دەبێت لە پێرفۆڕمانس وە لەوانەییە ببێت بە کێشە لەگەڵ ستەتی کۆمپۆنێنتەکە. سەیرێکی ئارتیکڵەکەی ڕۆبین پۆکۆرنی بکە بە ناونیشانی ڕوونکردنەوەیەکی تەواو لەسەر ئەنجامە خراپەکانی بەکارهێنانی ئیندێکس وەکو کی. گەر ئەوەت هەڵبژاردووە کە کی بۆ ئایتمەکان دانەنێیت ئەوا ڕیاکت بەشێوە سەرەکیەکە خۆی ئیندێکسەکان بەکار دەهێنێت وەکو کی.

ئەمەش ڕوونکردنەوەیەکیی تەواو دەربارەی بۆچی کییەکان پێویستن ئەگەر ئارەزووی زیاتر فێربوون دەکەیت.

زیادکردنی کۆمپۆنێنتەکان و کییەکان

کییەکان تەنها کاریگەریان دەبێت کاتێک ئەڕەی هەبێت

بۆنموونە، ئەگەر تۆ کۆمپۆنێنتی ListItem زیاد کرد , پێویستە کییەکە لە ناو <ListItem/> ئیلیمێنتەکانی ئەڕەیەکە بێت نەک لە ناو <ul> ئیلیمێنتەکانی ListItem کە خۆی.

نموونەی : بەکارهێنانی کی بە شێوەیەکی هەڵە

function ListItem(props) {
  const value = props.value;
  return (
    // Wrong! There is no need to specify the key here:    <li key={value.toString()}>      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Wrong! The key should have been specified here:    <ListItem value={number} />  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

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

نموونەی : بەکارهێنانی کی بە شێوەیەکی ڕاست

function ListItem(props) {
  // Correct! There is no need to specify the key here:  return <li>{props.value}</li>;}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.    <ListItem key={number.toString()}              value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

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

تاقیبکەرەوە لە کۆد پێن

یاسایەکی گرنگ ئەوەیە کە ئیلیمێنتەکانی ناو ()map پێویستە کییان هەبێت.

پێویستە کییەکان بێ وێنەبن (دووبارە نەبنەوە) لەنێوان کییەکانی تر

ئەو کییانەی بەکاردێن لەگەڵ ئەڕەیەکدا پێویستە بێ وێنەبن، بەڵام پێویست ناکات بەشێوەیەکی گشتی بێ وێنەبن، واتا دەتوانیین کییەکان بەکار بێنینەوە لە ئەڕەیەکی تردا.

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: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
  <Blog posts={posts} />,
  document.getElementById('root')
);

تاقیبکەرەوە لە کۆد پێن

کییەکان ئیش دەکەن وەکو ڕێنوێنیکەر بۆ ڕیاکت نابن بە بەشێک لە کۆمپۆنێنتەکە (واتا پیشان نادرێن). ئەگەر بتەوێت ئەو نرخە لە ناو کۆمپۆنێنتەکەت پیشان بدرێت وەکو پرۆپ بیکە بە بەشێک لە کۆمپۆنێنتەکە بەڵام بە ناوێکی جیاواز.

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

لە نموونەکای سەرەوەدا کۆمپۆنێنتی Post، props.id پیشان دەدات بەڵامprops.key نا.

تێکهەڵکێشکردنی ()map بۆ ناو JSX

لە نموونەکەی سەرەوەدا ڤاریبڵی listItems بە جیا ناساندوومانە پاشان کردوومانەتە ناو JSX.

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

JSX ڕێگەدەدات بە تێکەڵ کردنی هەموو دەربڕینێک لە ناو کەوانەی لوول کەواتە ئەتوانین ()map لەگەڵیاندا بنووسین لە ئەنجامدا .

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

تاقیبکەرەوە لە کۆد پێن

هەندێ کات ئەم ئەنجامە کۆدێکی ڕوونتردەدات، بەڵام ئەم ستایلە لەوانەیە کێشەت بۆ دروست کات . وەک لە جاڤا سکریپتدا، ئەوە دێتە پێش کە بڕیار بدەیت ئەوە دەهێنێت کە ڤاریبڵێکی تر بنووسیت بۆ ئەوەی خوێندنەوەی ئاسان ببێت. ئەوە بزانە کە ئەگەر ناو ()map زۆر تێکەڵ و ئاڵۆز بوو. ئەوە باشترە کە کۆمپۆنێنتێك زیاد بکەیت.