بروزرسانی: 07 اردیبهشت 1404
تسلط بر React Conditional Rendering: A Deep Dive
رندر شرطی یک ویژگی قدرتمند در React است که به توسعه دهندگان اجازه می دهد کامپوننت ها را بر اساس شرایط خاص رندر کنند.
این یک مفهوم اساسی است که نقش مهمی در ساخت برنامه های وب پویا و تعاملی ایفا می کند.
در این راهنمای جامع، ما عمیقاً به رندر شرطی در React می پردازیم و تکنیک های پایه و پیشرفته را با مثال هایی برای درک صحیح پوشش می دهیم.
درک رندر شرطی در React
رندر شرطی در React به توسعه دهندگان این امکان را می دهد تا به صورت پویا محتوایی را که بر روی صفحه نمایش داده می شود بر اساس مقادیر خاصی که می توانند در یک متغیر، حالت یا props ذخیره شوند، کنترل کنند.
این می تواند در سناریوهایی که می خواهید عناصر UI خاصی را نشان داده یا پنهان کنید، طرح بندی صفحه را تغییر دهید یا محتوای متفاوتی را بر اساس تعاملات کاربر ارائه دهید، بسیار مفید باشد.
رندر شرطی در برنامه های 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(\'https://example.com/data\')
.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 نادرست است، ما یک پیغام خطا را با استفاده از نشان می دهیم 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 است.
عملگر سه تایی به شما این امکان را می دهد که با تعیین 3 عملوند، یک دستور if-else درون خطی فشرده بنویسید. عملوند اول شرط است، در حالی که دو عملوند دیگر عبارت هستند. اگر شرط باشد true، اولین عبارت اجرا خواهد شد. در غیر این صورت، عبارت دوم.
به عنوان مثال، می توانید کامپوننت های مختلفی را بر اساس یک prop رندر کنید:
import ComponentA from \'./ComponentA\';
import ComponentB from \'./ComponentB\';
const ExampleComponent = ({ shouldRenderComponentA }) => {
return (
<div>
{shouldRenderComponentA ? <ComponentA /> : <ComponentB />}
</div>
);
};
export default ExampleComponent;در این کد یک عدد داریم ExampleComponent که طول می کشد یک پایه به نام 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;در این مثال، ما از عملگر سه تایی استفاده می کنیم تا متن های مختلف را به صورت مشروط بسته به مقدار the ارائه دهیم 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(\'https://jsonplaceholder.typicode.com/todos/1\');
const jsonData = await response.json();
setData(jsonData);
setIsLoading(false);
};
fetchData();
}, []);
return (
<div>
{isLoading ? <Spinner /> : <p>{data.title}</p>}
</div>
);
};
export default ExampleComponent;در این مثال، ما از عملگر سه تایی برای رندر مشروط یک اسپینر بارگیری در حالی که داده ها از یک API واکشی می شوند استفاده می کنیم. هنگامی که داده ها در دسترس هستند، ما آن را ارائه می کنیم title دارایی با استفاده از عملگر سه تایی
استفاده از عملگرهای منطقی 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(\'https://api.example.com/data\');
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 بسته به نیازهای برنامه شما می تواند پیچیده تر باشد. در اینجا چند تکنیک پیشرفته وجود دارد که می توانید برای رندر شرطی در سناریوهای پیچیده تر استفاده کنید.
استفاده از دستورات سوئیچ برای رندر شرطی
در حالی که اگر دستورات و عملگرهای سه تایی رویکردهای رایج برای رندر شرطی باشند، گاهی اوقات a 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
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 را بر اساس شرایط مختلف به روز کنید.
بسته به پیچیدگی منطق UI برنامه خود، می توانید رویکردی را انتخاب کنید که به بهترین وجه با نیازهای شما مطابقت دارد.
به یاد داشته باشید که کد خود را تمیز، منظم و خوانا نگه دارید و همیشه منطق رندر شرطی خود را به طور کامل آزمایش کنید تا مطمئن شوید که در سناریوهای مختلف مطابق انتظار عمل می کند.
به دنبال راه حل میزبانی ایده آل برای برنامه های React خود هستید؟ میزبانی برنامه Kinsta را به صورت رایگان امتحان کنید!