كيفية التكرار داخل React JSX

كيفية التكرار في مكون React JSX


إذا كانت لديك مجموعة من العناصر التي تحتاج إلى تكرارها لتوليد جزء JSX ، يمكنك إنشاء حلقة ، ثم إضافة JSX إلى مصفوفة:

const elements = [] //..some array

const items = []

for (const [index, value] of elements.entries()) { items.push(<Element key={index} />) }

الآن عند عرض JSX ، يمكنك تضمين ملفitemsمجموعة بلفها بأقواس مجعدة:

render() {
  const elements = ['one', 'two', 'three'];

const items = []

for (const [index, value] of elements.entries()) { items.push(<li key={index}>{value}</li>) }

return ( <div> {items} </div> ) }

يمكنك أن تفعل الشيء نفسه مباشرة في JSX ، باستخدامmapبدلاً من حلقة for-of:

render: function() {
  const elements = ['one', 'two', 'three'];
  return (
    <ul>
      {elements.map((value, index) => {
        return <li key={index}>{value}</li>
      })}
    </ul>
  )
}

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: