conditional in react and javascript


١-سبتمبر-٢٠٢٠
abobaker hilal

ابوبكر هلال

الليلة السندوش في رياكت وبتكلم عن الشروط والاستخدام الامثل والافضل ,وهي اربعة انواع في الاستخدام Conditional في رياكت او في جافا اسكربت عامة بس هنا بتكلم عن رياكت

الطريقة الاولي

ده الطريقة العادية للشرط باستخدام if و else لو اتحقق الشرط الاول وكان بي true نفذ لي كده لو ما اتحقق وكان بي false نفذ كده

ملاحظة

بسيطة هنا حابي انوه انو else if في jsx في رياكت م بتشتغل

import React, { useState } from 'react' export default const Conditional = ()=> { const [login, setLogin] = useState(false) // method 1 if (login) { return <h2> wel come abobaker </h2> } else { return <h2> welcome guest</h2> } }

الطريقة التانية

وده الطريقة الشوية افضل من الطريقة الاولي انك بتستخد متغير تخزن فيو ناتج الشرط بعديها بترجع المتغير ده

طبعا في حالات افضل تستخدم فيها الطريقة ده كمثال لو عاوز تعمل تنسيق معين مثلا لو كان الزول ده حاليا نشط خلي العلامة بتاعت الحالة تاخد كلاس معين لو ما نشط خليها تاخد الكلاس التاني

import React, { useState } from 'react' export default const Conditional = ()=> { const [login, setLogin] = useState(false) // method 2 let message; if (login) { message = <h2> welcome beko </h2> } else { message = <h2> welcome guest </h2> } return <div> {message} </div> }

الطريقة التالتة

وده الطريقة المختصرة للif وهي المحبذة جدا وبتخلي كود clean ومقروء نفس الطريقة الاولي ولكن باختصار بتكتب الشرط وبتخت علامة الاستفهام لو اتحقق نفذ لو ما تحقق بتخت علامة النقطتبن فوق بعض بمعني والا نفذ كذا

import React, { useState } from 'react' export default const Conditional = ()=> { const [login, setLogin] = useState(false) // method 3 return login ? <h2> welcome beko</h2> : <h2> wel come guest</h2> } // Abobaker Hilal

الطريقة الرابعة

وده الابسط والان ظابطة ههه علي قولنا صديقي صديق هنا بستخدم المعاملات وخاصة && بمعني لو الشرط ده صح حقق كذا وبس والسلام عليكم

ملاحظة

هي لا ترجع شي في حالة عدم صح الشرط هي بترجع فقط في حالة الشرط صح وده بحكم استخدامها يعني م بستخدمها في اي حاجه لا بستخدم في حالة عاوز تكون الحاجة ده مثلا صح بس او ف حالة خطا بس بحيث لا تجتمع الحالتين

import React, { useState } from 'react' export default const Conditional = ()=> { const [login, setLogin] = useState(false) // method 4 return login && <h2> wel come beko </h2> } // Abobaker Hilal