رد فعل العرض الشرطي
في React ، يمكنك تجسيد المكونات بشكل شرطي.
هناك عدة طرق للقيام بذلك.
if
بيان - تصريح
يمكننا استخدام if
مشغل JavaScript لتحديد المكون الذي سيتم عرضه.
مثال:
سنستخدم هذين المكونين:
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>Goal!</h1>;
}
مثال:
الآن ، سننشئ مكونًا آخر يختار المكون الذي سيتم عرضه بناءً على شرط:
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
حاول تغيير isGoal
السمة إلى true
:
مثال:
ReactDOM.render(
<Goal isGoal={true} />,
document.getElementById('root')
);
الحصول على شهادة!
أكمل وحدات React ، ونفّذ التمارين ، وخذ الامتحان واحصل على شهادة w3schools !!
95 دولارًا ENROLL
&&
عامل منطقي
هناك طريقة أخرى لتصيير مكون React بشكل مشروط باستخدام &&
عامل التشغيل.
مثال:
يمكننا تضمين تعبيرات JavaScript في JSX باستخدام الأقواس المتعرجة:
function Garage(props) {
const cars = props.cars;
return (
<>
<h1>Garage</h1>
{cars.length > 0 &&
<h2>
You have {cars.length} cars in your garage.
</h2>
}
</>
);
}
const cars = ['Ford', 'BMW', 'Audi'];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
إذا كان cars.length
يساوي صحيحًا ، &&
فسيتم عرض التعبير بعد.
حاول إفراغ cars
المصفوفة:
مثال:
const cars = [];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
مشغل ثلاثي
هناك طريقة أخرى للتصيير الشرطي للعناصر وهي استخدام عامل تشغيل ثلاثي.
condition ? true : false
سوف نعود إلى مثال الهدف.
مثال:
أعد MadeGoal
المكون إذا كان
isGoal
كذلك true
، وإلا قم بإرجاع MissedGoal
المكون:
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
لمعرفة المزيد ، راجع قسم المشغل الثلاثي .