2.7 KiB
title | localeTitle |
---|---|
Use && for a More Concise Conditional | استخدم && من أجل شرطي أكثر موجزًا |
استخدم && من أجل شرطي أكثر موجزًا
المثال المعطى هو
{condition && <p>markup</p>}
والذي يظهر أدناه باستخدام حالة this.state.dinnerCoined boolean. إذا كان الأمر المنطقي صحيحًا ، فسيتم عرض الترميز المضمن في {} مع الشرط ، وإلا فلن يتم عرضه
`class MyComponent extends React.Component { constructor(props) { super(props); this.state = { dinnerCooked: true } } render() { return (
Dinner is Cooked!
}//h1 tag contents will be displayedHint:
You don't have to do a full if/then
statement. Just write the condition you are checking.
Solution:
As you can see, you don't have to write the full if/then
statement. We only need to check the condition and see if it returns true
or false
. In this case, we are checking the value of display
. If the value is true
, then you return the value to the right of &&
, which is <h1>Displayed!</h1>
. If the condition is false
, it returns nothing.
`
JSX فئة MyComponent تمتد إلى React.Component { منشئ (الدعائم) { السوبر (الدعائم)؛ this.state = { dinnerCooked: false }
} يجعل() {
إرجاع (
{this.state.dinnerCooked &&
العشاء مطهو!
} // لن يتم عرض محتويات العلامة h1 العرض: صحيح } this.toggleDisplay = this.toggleDisplay.bind (this)؛ } toggleDisplay () { this.setState ({ display:! this.state.display })؛ } يجعل() { // تغيير رمز أدناه هذا الخط إرجاع (
تبديل العرض {this.state.display &&
عرض!
}
)؛ } }؛ `` ` Explanation from ReactJS.org documentation
يمكنك تضمين أي تعبيرات في JSX من خلال لفها في أقواس معقوفة. وهذا يشمل جافا سكريبت المنطقي && المشغل. يمكن أن يكون سهلًا بما في ذلك أحد العناصر بشكل مشروط
يعمل ذلك لأنه في جافا سكريبت ، يتم تقييم true && expression دائمًا للتعبير ، ويتم تقييم false && expression دائمًا إلى false.
لذلك ، إذا كان الشرط صحيحًا ، فسيظهر العنصر بعد &&&hl=ar مباشرةً في الإخراج. إذا كانت خاطئة ، سوف يتجاهل React ويتخطاه.