نمایش کامپوننت فرزند تنها در زمان هاور کردن روی کامپوننت والد در FluentUI + React

توضیحات کلی درباره نمایش کامپوننت فرزند در React

در دنیای توسعه وب، گاهی اوقات نیاز داریم تا عناصر مختلف روی صفحه بر اساس تعاملات کاربر تغییر کنند. یکی از تکنیک‌های محبوب و پرکاربرد، نمایش یا عدم نمایش یک کامپوننت فرزند زمانی است که کاربر روی کامپوننت والد هاور می‌کند. این کار می‌تواند به کاربر تجربه کاربری بهتری ارائه دهد و اجزا را در صفحه تنها زمانی که لازم است به نمایش بگذارد.

در این مقاله به بررسی نحوه انجام این کار با استفاده از کتابخانه FluentUI در کنار React می‌پردازیم. کتابخانه FluentUI از جمله کتابخانه‌های پرطرفدار توسعه رابط کاربری است که توسط مایکروسافت برای بهبود و سرعت توسعه اجزای UI طراحی شده است. با ترکیب React و FluentUI می‌توان عناصر زیبا و کاربرپسند ساخت.

علاوه بر بهره‌گیری از قدرت FluentUI، استفاده از ویژگی‌های CSS مانند :hover و شیوه‌های پیشرفته کنترل حالت‌ها در React می‌تواند کمک کند تا تجربه کاربری بسیار پویا و واکنش‌پذیر به دست آوریم. برای هدف کنونی، از کامپوننت‌های FluentUI و مدیریت حالت‌های اولیه و وضعیت‌ها در React استفاده خواهیم کرد.

در اینجا، با مثالی عملی نحوه تنظیم این ویژگی را بررسی می‌کنیم. هدف این است که بتوانید به راحتی چنین خواسته‌هایی را در پروژه‌های واقعی خود پیاده‌سازی کنید و از امکانات غنی FluentUI بهره‌مند شوید.

کد نمونه

import React, { useState } from 'react';
import { DefaultButton } from 'office-ui-fabric-react';

const ParentComponent = () => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div 
      onMouseEnter={() => setIsHovered(true)} 
      onMouseLeave={() => setIsHovered(false)}
      style={{ border: '1px solid black', padding: '20px', display: 'inline-block'}}
    >
      <span>Hover over me!</span>
      {isHovered && <ChildComponent />}
    </div>
  );
};

const ChildComponent = () => {
  return (
    <div style={{ marginTop: '10px', backgroundColor: '#f0f0f0', padding: '10px' }}>
      <DefaultButton text="I'm a child component!" />
    </div>
  );
};

export default ParentComponent;

توضیح خط به خط کد

import React, { useState } from 'react';
این خط React و هوک useState را از کتابخانه React وارد می‌کند که ما برای مدیریت حالت خود از آن استفاده می‌کنیم.

import { DefaultButton } from 'office-ui-fabric-react';
این خط کامپوننت DefaultButton را از کتابخانه FluentUI (همان office-ui-fabric-react) وارد می‌کند که در این مثال از آن استفاده می‌کنیم.

const ParentComponent = () => { ... }
ایجاد یک کامپوننت تابعی به نام ParentComponent. این کامپوننت وظیفه دارد نمایش و کنترل کامپوننت فرزند را مدیریت کند.

const [isHovered, setIsHovered] = useState(false);
ایجاد یک وضعیت (state) به نام isHovered که به ما کمک می‌کند تا بدانیم که آیا کاربر روی کامپوننت هاور کرده است یا خیر.

<div onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} ... >
این div شامل دو event handler است: onMouseEnter و onMouseLeave که به ترتیب وضعیت را هنگام هاور کردن و ترک کردن تنظیم می‌کنند.

{isHovered && <ChildComponent />}
این خط تصمیم می‌گیرد که آیا کامپوننت فرزند باید نمایش داده شود یا نه، بر اساس مقدار وضعیت isHovered.

const ChildComponent = () => { ... }
ایجاد کامپوننت فرزند که تنها زمانی نمایش داده می‌شود که کاربر روی کامپوننت والد هاور کرده باشد.