logo
logo
تبلیغ کلیکی تاپ سایت 98

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

دستور 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’));

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

موفق باشید.

عزیزانی که تمایل دارند به تیم نویسندگی تاپ سایت 98 بپیوندند می توانند از طریق واتساپ با ما در ارتباط باشند. ما بهترین افراد را به تیم خود اضافه خواهیم کرد.

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

دوره ارز دیجیتال تاپ سایت 98

منبع: w3schools

تگ: آموزش React

دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.