دستور IF در React | React Conditional

هدایت عباسی آموزش جاوا اسکریپت

در این بخش از آموزش React از تاپ سایت 98 به سراغ دستور IF در React می رویم. دستورات شرطی یکی از دستورات مهم زبان های برنامه نویسی هستند و بسیار کاربردی می باشند. ما قصد داریم روش استفاده از دستورات شرطی و IF را در ری اکت React با ذکر چند مثال توضیح دهیم.

آموزش دستور If در React

در React می توانید کامپوننت ها را به صورت مشروط رندر کنید. راه های مختلفی برای این کار وجود دارد.

اکنون، کامپوننت دیگری ایجاد می‌کنیم که انتخاب می‌کند کدام کامپوننت بر اساس یک شرط ارائه شود:

در مثال زیر ما دو کامپوننت ایجاد کرده ایم و در کامپوننت Garage و با دستور شرطی IF چک می کنیم که مقدار ورودی true یا false باشد بر اساس آن یکی از کامپوننت ها اجرا می شود.

import React from 'react';
import ReactDOM from 'react-dom';
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>GOAL!</h1>;
}
function Garage(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
export default function App() {
return (<Garage isGoal={true}/>)
}
ReactDOM.render(<App />, document.getElementById('root'));

روش دیگر استفاده از IF

روش دیگر استفاده از IF را در مثال زیر مشاهده می کنید. کامپوننت Garage را در مثال بالا تغییر دهید. نتیجه دقیقا همان خواهد بود.

function Garage(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}

استفاده از && در React

در دستورات شرطی زمانی که از && یا and استفاده می شود باید دو شرط برقرار باشد مثلا ما ابتدا چک می کنیم که مقدار Length بزرگتر از 2 است یا خیر؟ اگر مقدار بزرگتر از 2 باشد تگ h2 اجرا می شود.

Import React from ‘react’;
import ReactDOM from ‘react-dom’;
function Garage(props) {
const cars = props.cars;
return (
<>
<h1>Garage</h1>
{cars.length > 2 &&
<h2>
You have {cars.length} cars in your garage.
</h2>
}
</>
);
}
const cars = [‘Ford’, ‘BMW’, ‘Audi’];
export default function App() {
return (
<Garage cars={cars}/>
)
}
ReactDOM.render(<App />, document.getElementById(‘root’));

امیدواریم این بخش از آموزش نیز برای شما عزیزان مفید بوده باشد.

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید