به طراح وب خوش آمدید.
رندر شرطی یک ویژگی قدرتمند React است که به توسعه دهندگان اجازه می دهد کامپوننت ها را بر اساس شرایط خاص رندر کنند.
این یک مفهوم اساسی است که نقش مهمی در ایجاد برنامه های کاربردی وب پویا و تعاملی دارد.
در این آموزش دقیق، ما به رندر شرطی در React می پردازیم و تکنیک های پایه و پیشرفته را با مثال هایی پوشش می دهیم تا شما را به درستی برسانید.
درک رندر شرطی در React
رندر شرطی در React به توسعه دهندگان این امکان را می دهد تا بر اساس مقادیر خاصی که می توانند در یک متغیر، وضعیت یا ویژگی ذخیره شوند، به صورت پویا محتوایی را که روی صفحه نمایش داده می شود، کنترل کنند.
این می تواند در سناریوهایی که می خواهید عناصر رابط کاربری خاصی را نشان داده یا پنهان کنید، طرح بندی صفحه را تغییر دهید یا محتوای دیگری را بر اساس تعامل کاربر نمایش دهید، بسیار مفید باشد.
رندر شرطی در برنامههای React مهم است زیرا به شما امکان میدهد رابطهای کاربری پویا و تعاملی ایجاد کنید که میتواند به تغییرات دادهها و تعامل بیدرنگ کاربر پاسخ دهد.
این به بهبود عملکرد و کارایی برنامه های کاربردی شما با اجتناب از رندر غیر ضروری اجزا یا عناصر غیر ضروری کمک می کند.
تکنیک های اولیه رندر شرطی
چند روش اساسی وجود دارد که می توانید برای رندر شرطی در React استفاده کنید. بیایید به هر یک از آنها با جزئیات نگاه کنیم.
استفاده از دستور if برای رندر شرطی
یکی از ساده ترین راه ها برای پیاده سازی رندر شرطی در React استفاده از سنتی است if
بیانیه.
if (condition) {
return <p>Expression 1</p>;
} else {
return <p>Expression 2</p>;
}
جاوا اسکریپت if
اپراتور می تواند در داخل کامپوننت شما استفاده شود render()
روشی برای نمایش مشروط محتوا بر اساس یک شرایط خاص.
به عنوان مثال، می توانید از دستور if برای نمایش شمارنده دانلود در حالی که منتظر بارگذاری داده هستید استفاده کنید:
import { useState, useEffect } from 'react';
import Spinner from './Spinner';
const MyComponent = () => {
const [isLoading, setIsLoading] = useState(true);
const [data, setData] = useState(null);
useEffect(() => {
// Fetch data from an API
fetch('
.then((response) => response.json())
.then((data) => {
setData(data);
setIsLoading(false);
});
}, []);
if (isLoading) {
return <Spinner />;
}
return <div>{/* Render the data here */}</div>;
};
export default MyComponent;
در این مثال MyComponent
با استفاده از API داده ها را بازیابی می کند useEffect
قلاب. در حالی که منتظر بارگذاری اطلاعات هستیم، مولفه Spinner را با آن رندر می کنیم if
بیانیه.
مثال دیگر رندر کردن یک رابط کاربری بازگشتی است که هنگام رندر کردن مؤلفه شما خطایی رخ می دهد:
const MyComponent = ({ data }) => {
if (!data) {
return <p>Something went wrong. Please try again later.</p>;
}
return <div>{/* Render the data here */}</div>;
};
export default MyComponent;
در این کد داریم MyComponent
طول می کشد data
پشتیبانی اگر data
prop false است، با استفاده از یک پیام خطا نمایش می دهیم if
بیانیه.
در نهایت، میتوانید محتوای متفاوتی را برای نقشهای کاربری مختلف به نمایش بگذارید if
بیانیه:
const MyComponent = ({ user }) => {
if (user.role === 'admin') {
return <p>Welcome, admin!</p>;
} else if (user.role === 'user') {
return <p>Welcome, user!</p>;
} else {
return <p>You are not authorized to access this page.</p>;
}
};
export default MyComponent;
در این کد داریم MyComponent
طول می کشد user
پشتیبانی بسته به user.role
دارایی، ما با استفاده از محتوای مختلف نمایش می دهیم if
بیانیه.
استفاده از عملگر سه تایی برای رندر شرطی
یکی دیگر از راه های مختصر برای پیاده سازی رندر شرطی در React استفاده از عملگر سه تایی (؟) در JSX است.
عملگر سه تایی به شما این امکان را می دهد که با تعیین ۳ عملوند، یک دستور if-else درون خطی فشرده بنویسید. عملوند اول یک شرط است و دو عملوند دیگر عبارت هستند. اگر شرط true
، اولین عبارت اجرا خواهد شد. در غیر این صورت، عبارت دوم.
به عنوان مثال، می توانید کامپوننت های مختلف را بر اساس props رندر کنید:
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';
const ExampleComponent = ({ shouldRenderComponentA }) => {
return (
<div>
{shouldRenderComponentA ? <ComponentA /> : <ComponentB />}
</div>
);
};
export default ExampleComponent;
در این کد داریم ExampleComponent
که طول می کشد props به نام shouldRenderComponentA
. ما از عملگر سه تایی برای رندر شرطی استفاده می کنیم ComponentA
یا ComponentB
بر اساس هزینه لوازم جانبی
همچنین می توانید متن های مختلفی را بسته به وضعیت نمایش دهید:
import { useState } from 'react';
const ExampleComponent = () => {
const [showMessage, setShowMessage] = useState(false);
return (
<div>
<button onClick={() => setShowMessage(!showMessage)}>
{showMessage ? 'Hide message' : 'Show message'}
</button>
{showMessage ? <p>Hello, world!</p> : null}
</div>
);
};
export default ExampleComponent;
در این مثال، ما از عملگر سه تایی برای نمایش مشروط متن های مختلف بسته به مقدار پارامتر استفاده می کنیم. showMessage
حالت. وقتی روی مقدار کلیک می کنید showMessage
تغییر می کند و متن به ترتیب نشان داده یا پنهان می شود.
در نهایت، میتوانید هنگام واکشی دادهها، شمارنده دانلود را تجسم کنید:
import { useState, useEffect } from 'react';
import Spinner from './Spinner';
const ExampleComponent = () => {
const [isLoading, setIsLoading] = useState(true);
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('
const jsonData = await response.json();
setData(jsonData);
setIsLoading(false);
};
fetchData();
}, []);
return (
<div>
{isLoading ? <Spinner /> : <p>{data.title}</p>}
</div>
);
};
export default ExampleComponent;
در این مثال، ما از یک عملگر سه تایی استفاده میکنیم تا زمانی که دادهها از یک API واکشی میشوند، یک بار شمارنده را به صورت مشروط ارائه کنیم. هنگامی که داده ها در دسترس هستند، ما تجسم می کنیم title
دارایی با استفاده از عملگر سه تایی
استفاده از عملگرهای Boolean AND و OR برای رندر شرطی
همچنین می توانید از AND منطقی (&&
) و OR (||
) برای پیاده سازی رندر شرطی در React.
عملگر AND منطقی اجازه می دهد تا کامپوننت فقط در صورت رعایت یک شرط خاص نمایش داده شود، در حالی که عملگر منطقی OR اجازه می دهد تا در صورت تحقق یکی از شرایط، کامپوننت نمایش داده شود.
این عملگرها زمانی مفید هستند که شما شرایط ساده ای دارید که تعیین می کند آیا یک جزء باید رندر شود یا خیر. به عنوان مثال، اگر می خواهید یک دکمه را فقط در صورتی نمایش دهید که فرم معتبر باشد، می توانید از عملگر منطقی AND به صورت زیر استفاده کنید:
import { useState } from 'react';
const FormComponent = () => {
const [formValues, setFormValues] = useState({ username: "", password: "" });
const isFormValid = formValues.username && formValues.password;
const handleSubmit = (event) => {
event.preventDefault();
// Submit form data
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={formValues.username}
placeholder="Type Username..."
onChange={(e) =>
setFormValues({ ...formValues, username: e.target.value })
}
/>
<br />
<input
type="password"
value={formValues.password}
placeholder="Type Password..."
onChange={(e) =>
setFormValues({ ...formValues, password: e.target.value })
}
/>
{isFormValid && <button type="submit">Submit</button>}
</form>
);
};
export default FormComponent;
در این مثال داریم FormComponent
که دارای یک فرم با دو فیلد ورودی برای username
و password
. ما استفاده می کنیم useState
قلاب برای مدیریت مقادیر فرم و isFormValid
متغیر برای بررسی اینکه آیا هر دو فیلد ورودی دارای یک مقدار هستند یا خیر. با استفاده از عملگر AND منطقی (&&)، دکمه ارسال را فقط در صورتی نمایش می دهیم که isFormValid
حقیقت. این تضمین می کند که دکمه فقط زمانی فعال است که فرم معتبر باشد.
به طور مشابه، می توانید از عملگر OR برای نمایش یک پیام بارگیری در صورتی که داده ها هنوز در حال بارگیری هستند یا یک پیام خطا در صورت بروز خطا استفاده کنید:
import React, { useEffect, useState } from 'react';
const DataComponent = () => {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [errorMessage, setErrorMessage] = useState('');
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('
const data = await response.json();
setData(data);
} catch (error) {
setErrorMessage('An error occurred while fetching data.');
} finally {
setIsLoading(false);
}
};
fetchData();
}, []);
return (
<>
{errorMessage || isLoading ? (
<p>{errorMessage || 'Loading...'}</p>
) : (
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
)}
</>
);
};
export default DataComponent;
در این مثال DataComponent
داده ها را از API با استفاده از fetch واکشی می کند و در یک لیست نمایش می دهد. ما استفاده می کنیم useState
قلاب برای مدیریت داده ها، وضعیت بارگیری و پیام خطا. با استفاده از عملگر منطقی OR (||) میتوانیم پیام بارگیری یا پیام خطا را در صورتی که یکی از شرایط آن درست باشد نمایش دهیم. این تضمین می کند که کاربر پیامی را مشاهده می کند که وضعیت فعلی فرآیند واکشی داده ها را نشان می دهد.
استفاده از عملگرهای AND و OR منطقی برای رندر شرطی در React روشی مختصر و خوانا برای مدیریت شرایط ساده است. با این حال، بهتر است از روش های دیگری مانند switch
ادعاهایی برای منطق پیچیده تر
تکنیک های پیشرفته رندر شرطی
رندر شرطی در React بسته به نیازهای برنامه شما می تواند پیچیده تر باشد. در اینجا چند تکنیک پیشرفته وجود دارد که می توان از آنها برای رندر شرطی در سناریوهای پیشرفته تر استفاده کرد.
استفاده از دستورات سوئیچ برای رندر شرطی
در حالی که اگر دستورات و عملگرهای سه تایی رویکردهای رایج برای رندر شرطی هستند، گاهی اوقات switch
ممکن است مناسب تر باشد، به خصوص زمانی که با شرایط متعدد سروکار داریم.
به عنوان مثال:
import React from 'react';
const MyComponent = ({ userType }) => {
switch (userType) {
case 'admin':
return <p>Welcome, admin user!</p>;
case 'user':
return <p>Welcome, regular user!</p>;
default:
return <p>Please log in to continue.</p>;
}
};
export default MyComponent;
در این کد switch
اپراتور برای نمایش محتوا بر اساس استفاده می شود userType
پشتیبانی مشروط این رویکرد می تواند هنگام برخورد با شرایط متعدد مفید باشد و راه سازماندهی شده و خواناتری برای مدیریت منطق پیچیده ارائه می دهد.
رندر شرطی با React Router
React Router یک کتابخانه محبوب برای مدیریت مسیریابی سمت مشتری در برنامه های React است. React Router به شما این امکان را می دهد که به صورت مشروط اجزا را بر اساس مسیر فعلی رندر کنید.
در اینجا یک مثال از اجرای رندر شرطی با استفاده از React Router آورده شده است:
import { useState } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import Login from './components/Login';
import Dashboard from './components/Dashboard';
import NotFound from './components/NotFound';
const App = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/login">
<Login setIsLoggedIn={setIsLoggedIn} />
</Route>
{isLoggedIn ? (
<Route path="/dashboard" component={Dashboard} />
) : (
<Route component={NotFound} />
)}
</Switch>
</Router>
);
};
export default App;
در این کد ما استفاده می کنیم isLoggedIn
شرط نمایش شرطی یا Dashboard
جزء اگر کاربر وارد شده باشد، یا NotFound
جزء اگر کاربر وارد نشده باشد. Login
کامپوننت نصب می شود isLoggedIn
حالت true
زمانی که کاربر با موفقیت وارد سیستم شود.
لطفا توجه داشته باشید که ما استفاده می کنیم <Route>
پشتیبانی از مؤلفه فرزند برای عبور Login
جزء و setIsLoggedIn
تابع. این به ما این امکان را می دهد که وسایل را به آنها منتقل کنیم Login
جزء بدون مشخص کردن آن در path
حمایت کردن
خلاصه
رندر شرطی یک تکنیک قدرتمند در React است که به شما این امکان را می دهد تا به صورت پویا UI خود را بر اساس شرایط مختلف به روز کنید.
بسته به پیچیدگی منطق رابط کاربری برنامه خود، می توانید رویکردی را انتخاب کنید که به بهترین وجه با نیازهای شما مطابقت دارد.
به یاد داشته باشید که کد خود را تمیز، منظم و خوانا نگه دارید و همیشه منطق رندر شرطی خود را کاملاً آزمایش کنید تا مطمئن شوید که در سناریوهای مختلف مطابق انتظار عمل می کند.
به دنبال راه حل میزبانی عالی برای برنامه های React خود هستید؟ میزبانی برنامه Kinsta را به صورت رایگان امتحان کنید!