قوائم رد الفعل
في React ، ستعرض القوائم بنوع من التكرار الحلقي.
طريقة مصفوفة JavaScript map()هي الطريقة المفضلة بشكل عام.
إذا كنت بحاجة إلى تجديد معلومات عن map()الطريقة ،
فراجع قسم ES6 .
مثال:
لنجعل كل السيارات من مرآبنا:
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = ['Ford', 'BMW', 'Audi'];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car brand={car} />)}
</ul>
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
عندما تقوم بتشغيل هذا الرمز في الخاص بك create-react-app، فإنه سيعمل ولكن ستتلقى تحذيرًا بأنه لا يوجد "مفتاح" متوفر لعناصر القائمة.
الحصول على شهادة!
أكمل وحدات React ، ونفّذ التمارين ، وخذ الامتحان واحصل على شهادة w3schools !!
95 دولارًا ENROLL
مفاتيح
تسمح المفاتيح لـ React بتتبع العناصر. بهذه الطريقة ، إذا تم تحديث عنصر أو إزالته ، فسيتم إعادة عرض هذا العنصر فقط بدلاً من القائمة بأكملها.
يجب أن تكون المفاتيح فريدة لكل شقيق. ولكن يمكن تكرارها عالميًا.
بشكل عام ، يجب أن يكون المفتاح معرفًا فريدًا يتم تعيينه لكل عنصر. كحل أخير ، يمكنك استخدام فهرس الصفيف كمفتاح.
مثال:
دعنا نعيد تشكيل مثالنا السابق ليشمل المفاتيح:
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = [
{id: 1, brand: 'Ford'},
{id: 2, brand: 'BMW'},
{id: 3, brand: 'Audi'}
];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car key={car.id} brand={car.brand} />)}
</ul>
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));