1.2 KiB
1.2 KiB
title | localeTitle |
---|---|
Render with an If/Else Condition | تقديم مع حالة If / Else |
تقديم مع حالة If / Else
طريقة
داخل طريقة تقديم المكون ، قم بكتابة / else عبارات تحتوي كل منها على طريقة إرجاع خاصة بها JSX مختلفة. وهذا يعطي المبرمجين القدرة على تقديم واجهة المستخدم المختلفة وفقا لظروف مختلفة.
أولاً ، قم بلف أسلوب الإرجاع الحالي داخل جملة if وقم بتعيين الشرط للتحقق مما إذا كان المتغير 'display' هو الصحيح. تذكر ، يمكنك الوصول إلى الحالة باستخدام this.state
.
حل
if (this.state.display === true) { return ( <div> <button onClick={this.toggleDisplay}>Toggle Display</button> <h1>Displayed!</h1> </div> ); }
بعد ذلك ، قم بإنشاء عبارة أخرى تقوم بإرجاع JSX نفسه بدون عنصر h1
.
else { return ( <div> <button onClick={this.toggleDisplay}>Toggle Display</button> </div> ) }